CSS選擇器

時間 2019-11-08

標籤 css 選擇器欄目 CSS 简体版

原文原文鏈接

1、css的基本語法css

　　css選擇器{html

　　　　　　css屬性：值;app

　　　　　　 css屬性：值;　ui

　　}　spa

1 body{ 2  background: red; 3  color:white; 4  }

2、基本的css選擇器3d

一、通用選擇器code

　　該選擇器會匹配文檔中的全部元素，包括html和body元素。htm

1 *{ 2  margin: 0px; 3  padding: 0px; 4 }

　　上面的css樣式用來取消文檔中全部元素的內邊距和外邊距。blog

二、元素選擇器rem

　　用來選擇文檔中該元素的全部實例。　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>document</title> 6 <style type="text/css"> 7 p{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p> I  love  China!</p> 14 <p> I  love  China!</p> 15 </body> 16 </html>

　　顯示效果：

三、類選擇器

　　類選擇採用全局屬性class匹配指定類的元素。　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>document</title> 6 <style type="text/css"> 7 .p1{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p class="p1"> I  love  China!</p> 14 <p> I  love  China!</p> 15 <span class="p1">I  love  China!</span> 16 </body> 17 </html>

　　顯示效果：　

　　一、*.class2和.class2是同樣，咱們能夠將前面的通用選擇器換成其餘元素選擇器，來縮小選擇範圍。當class屬性有多個值時，用空格隔開。

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>document</title> 6 <style type="text/css"> 7 p.p1{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p class="p1"> I  love  China!</p> 14 <p> I  love  China!</p> 15 <span class="p1">I  love  China!</span> 16 </body> 17 </html>

　　二、一個元素用於多個類選擇器，同一css屬性的優先級取決於樣式表中的前後順序，與類列表的前後順序無關。

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <style> 8 .red{ 9 color:red; 10 } 11 .green{ 12 color: green; 13 } 14 </style> 15 <body> 16 <h1 class="red green">多個類選擇器</h1> 17 </body> 18 </html>

　　交換style標籤中兩個類選擇器的順序。

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <style> 8 .green{ 9 color: green; 10 } 11 .red{ 12 color:red; 13 } 14 </style> 15 <body> 16 <h1 class="red green">多個類選擇器</h1> 17 </body> 18 </html>

四、id選擇器

　　使用全局屬性id的值選擇元素。　　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>document</title> 6 <style type="text/css"> 7 #p1{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p id="p1"> I  love  China!</p> 14 <p> I  love  China!</p> 15 <span>I  love  China!</span> 16 </body> 17 </html>

　　顯示效果：

五、屬性選擇器

　　根據元素的屬性來進行選擇。

　　a、[attribute]　　 選擇器用於選取帶有指定屬性的元素，忽略屬性值　

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4       <meta charset="UTF-8">
 5       <title>document</title>
 6       <style type="text/css">
 7  [id]{
 8  color: red;
 9 }
10  </style>
11  </head>
12  <body>
13      <p> I  love  China!</p>
14      <p id="p1"> I  love  China!</p>
15      <span>I  love  China!</span>
16  </body>
17  </html>

　　b、[attribute="value"] 選擇器用於選取帶有指定屬性和值的元素　　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>document</title> 6 <style type="text/css"> 7 [title="abc"]{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p title="abc"> I  love  China!</p> 14 <p> I  love  China!</p> 15 <span >I  love  China!</span> 16 </body> 17 </html>

　　c、[attribute^="value"] 選擇器用於選取帶有指定屬性且屬性值以value字符開頭的元素　　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>document</title> 6 <style type="text/css"> 7 [title^="a"]{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p title="abc"> I  love  China!</p> 14 <p> I  love  China!</p> 15 <span title="a1">I  love  China!</span> 16 </body> 17 </html>

　　d、[attribute*="value"] 選擇器用於選取帶有指定屬性和屬性值包含value字符的元素　　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>document</title> 6 <style type="text/css"> 7 [title*="a"]{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p> I  love  China!</p> 14 <p title="bac"> I  love  China!</p> 15 <span title="a1">I  love  China!</span> 16 </body> 17 </html>

　　e、[attribute~=value] 選擇器用於選取帶有指定屬性、屬性值具備多個值且其中一個值是value的元素　　　　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>document</title> 6 <style type="text/css"> 7 [class~="class1"]{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p> I  love  China!</p> 14 <p class="class1 class2"> I  love  China!</p> 15 <span title="a1">I  love  China!</span> 16 </body> 17 </html>

　 d、 [attribute|="value"] 選擇器用於選取帶有指定屬性、屬性值爲（能夠是0個）連字符分割多個值且其中第一個值是value的元素　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>document</title> 6 <style type="text/css"> 7 [id|="a1"]{ 8 border:2px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 <p> I  love  China!</p> 14 <p id="a1"> I  love  China!</p> 15 <span id="a1-2">I  love  China!</span> 16 </body> 17 </html>

3、複合選擇器

一、並集選擇器

　　用於單個選擇器匹配到的全部元素的並集。語法：選擇器1，選擇器2{ }　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p,a{ 8 background: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p>I  love China!</p> 14 <a href="http://www.baidu.com">百度</a> 15 </body> 16 </html>

二、後代選擇器

　　後代選擇器用於匹配第一個元素的後代，且匹配第二個元素。匹配第一個元素中的元素，而不單單是直接元素。語法：選擇器1 選擇器2{ }　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p span{ 8 background: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p>I  <span>love</span> China!</p> 14 <a href="http://www.baidu.com">百度</a> 15 </body> 16 </html>

三、選擇子元素

　　用於匹配第一個選擇器的元素的直接後代，且匹配第二個元素。語法：選擇器1 > 選擇器2{ }　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p>span{ 8 background: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p>I  <span>love</span> China!</p> 14 <a href="http://www.baidu.com">百度</a> 15 </body> 16 </html>

四、選擇兄弟元素

　　a、相鄰兄弟選擇器

　　　　目標元素緊跟第一個選擇器匹配的元素且匹配第二個元素。語法：選擇器1 + 選擇器2{ }　　　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p + a{ 8 background: red; 9 } 10 </style> 11 </head> 12 <body> 13 <a href="http://www.baidu.com">百度</a> 14 <p>I  <span>love</span> China!</p> 15 <a href="http://www.baidu.com">百度</a> 16 <a href="http://www.sina.com">新浪</a> 17 </body> 18 </html>

　　b、普通兄弟選擇器

　　　　目標元素位於匹配第一個選擇器的元素以後，且匹配第二個選擇器。語法：選擇器1 ~ 選擇器2{ }　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p ~ a{ 8 background: red; 9 } 10 </style> 11 </head> 12 <body> 13 <a href="http://www.baidu.com">百度</a> 14 <p>I  <span>love</span> China!</p> 15 <a href="http://www.baidu.com">百度</a> 16 <a href="http://www.sina.com">新浪</a> 17 </body> 18 </html>

3、僞元素選擇器

　　前面的元素選擇器經過選擇元素來操做文檔內容。僞元素實際上並不存在，爲了便於你選中文檔的內容。　

　　一、:firtst-line用來匹配文本塊的首行。　　　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 ::first-line{ 8 background: yellow; 9 } 10 </style> 11 </head> 12 <body> 13 <a href="http://www.baidu.com">百度</a> 14 <p>I  <span>love</span> China!<br>I like apple!</p> 15 <p>aaaaaa</p> 16 </body> 17 </html>

　 ::first-line和:first-line是同樣。該選擇器還能夠和其餘選擇器結合使用，如p:first-line;用來選擇p元素的首行。

　 二、:first-letter（::first-letter）選擇文本塊的首字母。　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 ::first-letter{ 8 background: yellow; 9 } 10 </style> 11 </head> 12 <body> 13 <a href="http://www.baidu.com">百度</a> 14 <p>I  <span>love</span> China!<br>I like apple!</p> 15 <p>aaaaaa</p> 16 </body> 17 </html>

　　三、::before和::after選擇器在元素的前面、後面插出內容　　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 a::before{ 8 content:"click here:"; 9 } 10 </style> 11 </head> 12 <body> 13 <a href="http://www.baidu.com">百度</a> 14 </body> 15 </html>

　　四、CSS計數器

　　a.建立計數器

　　body{

　　　　counter-reset:paracount;

　　}

　　這行代碼會初始化一個計數器paracount，初始值爲0.

　　指定初始值：　　counter-reset:paracount 10;

　　建立多個計數器：　　counter-reset:paracount 10 othercount; 　　　　counter-reset:paracount 10 othercount 2;

　　使用方法：　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 body{ 8 counter-reset: paracount 0; 9 } 10 p::before{ 11 content: counter(paracount) "."; 12 counter-increment: paracount 1; 13 } 14 </style> 15 </head> 16 <body> 17 <p>I love China!</p> 18 <p>I love apple!</p> 19 </body> 20 </html>

　　counter(計數器，數值格式)；用來講明使用哪一個計數器和數值的格式。數值格式能夠是list-style-type中的值。例如counter(paracount,lower-alpha).

" ."是數值和內容之間的分割符，也能夠是其餘的字符。經常使用的是句號和空格。

　　counter-increment屬性用來設置計數器的增量。默認是1.

4、僞類選擇器

　　僞類元素選擇器不是直接針對文檔元素的，而是爲你基於某些特徵選擇元素提供方便的。

　　一、結構僞類選擇器

　　結構僞類是根據元素在文檔中的位置選擇元素的。

　　a、根元素選擇器

　　：root選擇文檔的根元素。總數返回html元素。　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 :root{ 8 border:thin black solid; 9 } 10 </style> 11 </head> 12 <body> 13 <p>I love China!</p> 14 <p>I love apple!</p> 15 </body> 16 </html>

　　邊框會包裹着整個文檔。

　　b、使用子元素選擇器(能夠和其餘選擇器結合使用)

　　:first-child 選擇元素的第一個子元素。　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p>span:first-child{ 8 border: 2px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 <p><span>I</span> <span>love</span> <span>China!</span></p> 14 <p>I love apple!</p> 15 </body> 16 </html>

　　:last-child 選擇元素的最後一個子元素。　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 body>p:last-child{ 8 border: 2px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 <p>I love apple!</p> 14 <p>I love apple!</p> 15 </body> 16 </html>

　　:only-child 選擇元素中惟一一個子元素。 　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p>span:only-child{ 8 border: 2px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 <p>I <span>love</span> apple!</p> 14 <p>I <span>love</span> <span>apple!</span></p> 15 </body> 16 </html>

　　：only-of-type 選擇元素指定類型的惟一子元素。　　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 span:only-of-type{ 8 border: 2px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 <p>I <span>love</span> apple!</p> 14 <p>I <span>love</span> <span>apple!</span></p> 15 </body> 16 </html>

　　:nth-child選擇器

　　:nth-child(n) 選擇父元素的第n個子元素。

　　:nth-last-child(n) 選擇父元素的倒數第n個子元素

　　:nth-of-type(n) 選擇父元素定義類型的第n個子元素

　　:nth-last-of-type(n) 選擇父元素定義類型的倒數第n個子元素　　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 body> p:nth-of-type(2){ 8 border: 2px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 <p>I <span>love</span> apple!</p> 14 <a href="www.baidu.com">百度</a> 15 <p>I <span>love</span> <span>apple!</span></p> 16 </body> 17 </html>

二、UI僞類選擇器

　　UI僞類選擇器是根據元素的狀態匹配元素。

　　a、:enabled和:disabled　選擇啓用和禁用的元素　　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 :enabled{ 8 border: 2px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 <input type="text" disabled value="yiluhuakai"> 14 <br><br> 15 <input type="text"> 16 </body> 17 </html>

　　b、選擇已經勾選的元素（只用於單選框和複選框）　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 :checked +span{ 8 background: red; 9 } 10 </style> 11 </head> 12 <body> 13 <input type="checkbox" name="likes"><span>likes</span> 14 <input type="checkbox" name="likes"><span>likes2</span> 15 </body> 16 </html>

　　沒選中：

　　選中後：

　　c、選擇有效和無效的input元素

　　:invalid和:valid選擇器用來匹配不符合和符合輸入驗證要求的input元素。

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 :valid{ 8 border: 2px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 <input type="text" required="" value="yiluhuakai"> 14 <br><br> 15 <input type="text" required=""> 16 <button type="submit">提交</button> 17 </body> 18 </html>

　　d.選擇限定範圍的input元素

　　:in-range和:out-of-range　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 :in-range{ 8 border: 2px solid red; 9 } 10 :out-of-range{ 11 border: 2px solid yellow; 12 }; 13 </style> 14 </head> 15 <body> 16 <input type="number" min="0" max="5"> 17 </body> 18 </html>

　　輸入0：

　 輸入10

　　e、選擇必需的可選的input元素

　　:required匹配具備required屬性的元素。:optional匹配沒有required屬性的元素。　

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 :required{ 8 border: 2px solid yellow; 9 } 10 :optional{ 11 border: 2px solid red; 12 } 13 </style> 14 </head> 15 <body> 16 name: <input type="text" required=""> 17 <br>    <br> 18 password: <input type="text"> 19 </body> 20 </html>

三、動態僞類選擇器

　　動態僞類選擇器能夠根據條件改變匹配元素。

　　a.:link和:visited選擇器

　　:link 選擇連接元素

　　:visited 選擇用戶已經訪問的連接；　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 :link{ 8 background:red; 9 } 10 :visited{ 11 background:green; 12 } 13 </style> 14 </head> 15 <body> 16 <a href="http://www.baidu.com">百度</a> 17 <a href="http://www.sina.com">新浪</a> 18 </body> 19 </html>

　　連接沒有訪問的時候背景顏色是紅的，訪問後背景顏色是綠色。

　　b、:hover選擇器 :hover選擇器匹配用戶鼠標懸停在其上的任意元素。　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 a:hover{ 8 background: red; 9 }; 10 </style> 11 </head> 12 <body> 13 <a href="http://www.baidu.com">百度</a> 14 <a href="http://www.sina.com">新浪</a> 15 </body> 16 </html>

　　c.:active選擇器匹配用戶激活的元素。

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 a:active{ 8 background: green; 9 }; 10 </style> 11 </head> 12 <body> 13 <a href="http://www.baidu.com">百度</a> 14 <a href="http://www.sina.com">新浪</a> 15 </body> 16 </html>

　　d、使用：focus選擇器用於匹配當前得到焦點的元素。　　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 input:focus{ 8 border: 2px solid red; 9 }; 10 </style> 11 </head> 12 <body> 13 <input type="text" autofocus=""> 14 </body> 15 </html>

四、其餘選擇器

　　a、否認選擇器:not(選擇器) 對任意選擇器取反　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 a:not([href*="baidu"]){ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <a href="www.baidu.com">百度</a> 14 <a href="www.sina.com">新浪</a> 15 </body> 16 </html>

　　b、:empty選擇器用於匹配沒有定義任何子元素的元素。匹配的元素沒有任何內容。　　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 :empty{ 8 border: 2px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 <p></p> 14 <a href="www.baidu.com">百度</a> 15 <a href="www.sina.com">新浪</a> 16 </body> 17 </html>

　　c、:lang選擇器匹配基於lang全局屬性的元素。　　

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 :lang(en){ 8 border: 2px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 14 <a href="www.baidu.com" lang="en">百度</a> 15 <a href="www.sina.com" lang="en-us">新浪</a> 16 </body> 17 </html>

　　d、使用:target選擇器匹配URL片斷標識符指向的元素。請求expample.html#mytaget頁面會導航到該頁面指定id的元素上。　

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 :target{ 8 border: 2px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 <a href="www.baidu.com" id="baidu">百度</a> 14 <a href="www.sina.com" id="xinlang">新浪</a> 15 </body> 16 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。