亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 47
粉絲 3
評(píng)論 0
訪問(wèn)量 49481
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
css引入方式與上下文選擇器 偽類(lèi)結(jié)構(gòu)相關(guān)
吳
原創(chuàng)
775人瀏覽過(guò)

css引入方式與上下文選擇器 偽類(lèi)結(jié)構(gòu)相關(guān)

1.css三種引入方式

CSS引入三種方式:內(nèi)部樣式表、外部樣式表、行內(nèi)樣式
內(nèi)部樣式：僅對(duì)當(dāng)前頁(yè)面的元素有效，使用style標(biāo)簽
外部樣式：適用于所有引用了這個(gè)css樣式表的html文檔，使用link標(biāo)簽
行內(nèi)樣式：僅適用于當(dāng)前頁(yè)面中的指定的元素，使用style屬性

內(nèi)部樣式
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>css第一種引入方式：內(nèi)部樣式表</title>   
  7.     <style>
  8.         h1 {
  9.             color: blue;
  10.             border: 1px solid red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <h1>PHP中文網(wǎng)</h1>
  16. </body>
  17. </html>

演示截圖
內(nèi)部樣式

外部樣式
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>css外部樣式</title>
  7.     <link rel="stylesheet" href="css/demo1.css">
  8. </head>
  9. <body>
  10.     <h1>php中文網(wǎng)</h1>
  11. </body>
  12. </html>
  • 演示截圖
行內(nèi)樣式
  1.    <h1 style="color: violet;">php中文網(wǎng)</h1>
  • 演示截圖

2. css選擇器

css選擇器分為三大類(lèi)：

1.簡(jiǎn)單選擇器
選擇器 描述 示例
標(biāo)簽選擇器 根據(jù)元素標(biāo)簽名稱(chēng)進(jìn)行匹配 li {...}
類(lèi)選擇器 根據(jù)元素的class屬性進(jìn)行匹配 .a {...}
ID選擇器 根據(jù)元素的ID屬性進(jìn)行匹配 #a {...}
標(biāo)簽選擇器案例
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>css簡(jiǎn)單選擇器</title>
  6.     <style>
  7.         /* 標(biāo)簽選擇器，返回一組 方法：li {...}*/
  8.         li{
  9.             color: violet;
  10.         }
  12.         /* 類(lèi)選擇器，返回一組 方法：.a {...} */
  13.         .a {
  14.             color: red;
  15.             border: 1px solid black;
  16.         }
  18.         /* id選擇器，返回一個(gè) 方法：#b {...} */
  19.         #b {
  20.             color: blue;
  21.             border: 1px solid yellow;
  22.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <ul>
  28.         <li class="a">test1</li>
  29.         <li id="b">test1</li>
  30.         <li class="a">test1</li>
  31.         <li id="b">test1</li>
  32.         <li>test1</li>
  33.     </ul>
  34. </body>
  35. </html>

演示截圖

3.上下文選擇器

1.后代選擇器：ul li中間加空格，選擇當(dāng)前元素的所有層級(jí)
2.子選擇器：body>ul>li選擇當(dāng)前元素的父層級(jí)和子層級(jí)
3.同級(jí)相鄰選擇器：.a + li當(dāng)前元素相鄰的第一個(gè)兄弟元素
4.同級(jí)所有選擇器：.a ~ li當(dāng)前元素相鄰的后面所有元素

實(shí)戰(zhàn)案例
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <title>上下文選擇器</title>
  5.     <style>
  6.         /* 后代選擇器 */
  7.         ul li {
  8.             background-color: violet;
  9.         }
  10.         /* 子元素選擇器 */
  11.         body>ul>li {
  12.             background-color: yellow;
  13.         }
  14.         /* 同級(jí)相鄰選擇第一個(gè)兄弟元素 */
  15.         .a + li {
  16.             background-color: green;
  17.         }
  18.         /* 同級(jí)相鄰選擇后面所有兄弟元素 */
  19.         .a ~ li {
  20.             background-color: red;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <ul>
  26.         <li>test1</li>
  27.         <li class="a">test1</li>
  28.         <li>test1</li>
  29.         <li>test1
  30.             <ul>
  31.                 <li>tset2</li>
  32.                 <li>tset2</li>
  33.                 <li>tset2</li>
  34.             </ul>
  35.         </li>
  36.         <li>test1</li>
  37.     </ul>
  38. </body>
  39. </html>
演示截圖

4.偽類(lèi)選擇器
結(jié)構(gòu)偽類(lèi)
選擇器 描述 示例
nth-of-type(an+b) 匹配任意位置的子元素;<br>n全部n+3偏移量往后的所有元素;<br>2n或者even選擇所有索引為偶數(shù)的元素;<br>2n-1或2n+1或者odd選擇所有索引為奇數(shù)的元素 ul li:nth-of-type(3){...}
:nth-last-of-type{an+b} 反向獲取任意位置的子元素 ul li:nth-last-of-type(3){...}
:first-of-type 選擇第一個(gè)子元素 ul li:first-of-type
:last-of-type 選擇最后一個(gè)子元素 ul li:last-of-type
:only-of-type 選擇父元素下唯一的子元素 ul li:only-of-type
  • 匹配任意位置的子元素
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>偽類(lèi)選擇器</title>
  6.     <style>
  7.         /* 匹配任意位置的子元素 */
  8.         ul li:nth-of-type(5){
  9.             background-color: yellow;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <ul>
  15.         <li>tset1</li>
  16.         <li>tset2</li>
  17.         <li>tset3</li>
  18.         <li>tset4</li>
  19.         <li>tset5</li>
  20.         <li>tset6</li>
  21.         <li>tset7</li>
  22.         <li>tset8</li>
  23.         <li>tset9</li>
  24.         <li>tset10</li>
  25.     </ul>
  26. </body>
  27. </html>

演示截圖

  • 選擇為偶數(shù)的元素
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>偽類(lèi)選擇器</title>
  6.     <style>
  7.         /* 選擇所有為偶數(shù)的元素 */
  8.         ul li:nth-of-type(even){
  9.             background-color: violet;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <ul>
  15.         <li>tset1</li>
  16.         <li>tset2</li>
  17.         <li>tset3</li>
  18.         <li>tset4</li>
  19.         <li>tset5</li>
  20.         <li>tset6</li>
  21.         <li>tset7</li>
  22.         <li>tset8</li>
  23.         <li>tset9</li>
  24.         <li>tset10</li>
  25.     </ul>
  26. </body>
  27. </html>

  • 選擇所有為奇數(shù)的元素
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>偽類(lèi)選擇器</title>
  6.     <style>
  7.         /* 選擇所有為奇數(shù)的元素 */
  8.         ul li:nth-of-type(odd){
  9.             background-color: yellow;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <ul>
  15.         <li>tset1</li>
  16.         <li>tset2</li>
  17.         <li>tset3</li>
  18.         <li>tset4</li>
  19.         <li>tset5</li>
  20.         <li>tset6</li>
  21.         <li>tset7</li>
  22.         <li>tset8</li>
  23.         <li>tset9</li>
  24.         <li>tset10</li>
  25.     </ul>
  26. </body>
  27. </html>

演示截圖

  • 快速匹配第一個(gè)元素
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <title>偽類(lèi)選擇器</title>
  5.     <style>
  6.         /* 快速匹配第一個(gè)元素 */
  7.         ul li:first-of-type{
  8.             background-color: violet;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <ul>
  14.         <li>tset1</li>
  15.         <li>tset2</li>
  16.         <li>tset3</li>
  17.         <li>tset4</li>
  18.         <li>tset5</li>
  19.         <li>tset6</li>
  20.         <li>tset7</li>
  21.         <li>tset8</li>
  22.         <li>tset9</li>
  23.         <li>tset10</li>
  24.     </ul>
  25. </body>
  26. </html>

演示截圖

  • 快速匹配倒數(shù)第一個(gè)元素
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>偽類(lèi)選擇器</title>
  6.     <style>
  7.         /* 快速匹配倒數(shù)第一個(gè)元素 */
  8.         ul li:last-of-type{
  9.             background-color: violet;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <ul>
  15.         <li>tset1</li>
  16.         <li>tset2</li>
  17.         <li>tset3</li>
  18.         <li>tset4</li>
  19.         <li>tset5</li>
  20.         <li>tset6</li>
  21.         <li>tset7</li>
  22.         <li>tset8</li>
  23.         <li>tset9</li>
  24.         <li>tset10</li>
  25.     </ul>
  26. </body>
  27. </html>

演示截圖

  • 選擇父元素下唯一的子元素
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>偽類(lèi)選擇器</title>
  6.     <style>
  7.         /* 選擇父元素下唯一的子元素 */
  8.         ul li:only-of-type{
  9.             background-color: red;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <ul>
  15.         <li>tset1</li>
  16.         <li>tset2</li>
  17.         <li>tset3</li>
  18.         <li>tset4</li>
  19.         <li>tset5</li>
  20.         <li>tset6</li>
  21.         <li>tset7</li>
  22.         <li>tset8</li>
  23.         <li>tset9</li>
  24.         <li>tset10</li>
  25.     </ul>
  27.     <ul>
  28.         <li>test1</li>
  29.     </ul>
  30. </body>
  31. </html>

演示截圖

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語(yǔ)：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)