自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

30個(gè)最常用CSS選擇器解析

作者：大范甘迪
開(kāi)發(fā) 前端
你也許已經(jīng)掌握了id、class、后臺(tái)選擇器這些基本的css選擇器。但這遠(yuǎn)遠(yuǎn)不是css的全部。下面向大家系統(tǒng)的解析css中30個(gè)最常用的選擇器，包括我們最頭痛的瀏覽器兼容性問(wèn)題。掌握了它們，才能真正領(lǐng)略css的巨大靈活性。

你也許已經(jīng)掌握了id、class、后臺(tái)選擇器這些基本的css選擇器。但這遠(yuǎn)遠(yuǎn)不是css的全部。下面向大家系統(tǒng)的解析css中30個(gè)最常用的選擇器，包括我們最頭痛的瀏覽器兼容性問(wèn)題。掌握了它們，才能真正領(lǐng)略css的巨大靈活性。

1. *

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

星狀選擇符會(huì)在頁(yè)面上的每一個(gè)元素上起作用。web設(shè)計(jì)者經(jīng)常用它將頁(yè)面中所有元素的margin和padding設(shè)置為0。 *選擇符也可以在子選擇器中使用。

  1. #container * {  
  2.      border: 1px solid black;  
  3.    } 

上面的代碼中會(huì)應(yīng)用于id為container元素的所有子元素中。 除非必要，我不建議在頁(yè)面中過(guò)的的使用星狀選擇符，因?yàn)樗淖饔糜蛱螅喈?dāng)耗瀏覽器資源。 兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera

2. #X

  1. #container {  
  2.       width: 960px;  
  3.       margin: auto;  
  4.    } 

井號(hào)作用域有相應(yīng)id的元素。id是我們最常用的css選擇器之一。id選擇器的優(yōu)勢(shì)是精準(zhǔn)，高優(yōu)先級(jí)(優(yōu)先級(jí)基數(shù)為100，遠(yuǎn)高于class的10)， 作為javascript腳本鉤子的不二選擇，同樣缺點(diǎn)也很明顯優(yōu)先級(jí)過(guò)高，重用性差，所以在使用id選擇器前，我們***問(wèn)下自己，真的到了非用id選擇 器的地步? 兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera

3. .X

  1. .error {  
  2.      color: red;  
  3.    }  

這是一個(gè)class(類(lèi))選擇器。class選擇器與id選擇器的不同是class選擇器能作用于期望樣式化的一組元素。 兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera

4. X Y

  1. li a {  
  2.      text-decoration: none;  
  3.    }  

這也是我們最常用的一種選擇器——后代選擇器。用于選取X元素下子元素Y，要留意的點(diǎn)是，這種方式的選擇器將選取其下所有匹配的子元素，無(wú)視層級(jí)，所以有 的情況是不宜使用的，比如上述的代碼去掉li下的所有a的下劃線(xiàn)，但li里面還有個(gè)ul，我不希望ul下的li的a去掉下劃線(xiàn)。使用此后代選擇器的時(shí)候要 考慮是否希望某樣式對(duì)所有子孫元素都起作用。這種后代選擇器還有個(gè)作用，就是創(chuàng)建類(lèi)似命名空間的作用。比如上述代碼樣式的作用域明顯為li。 兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera

5. X

  1. a { color: red; }    
  2. ul { margin-left: 0; }  

標(biāo)簽選擇器。使用標(biāo)簽選擇器作用于作用域范圍內(nèi)的所有對(duì)應(yīng)標(biāo)簽。優(yōu)先級(jí)僅僅比*高。 兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera

6. X:visited和X:link

  1. a:link { color: red; }     
  2. a:visted { color: purple; }  

使用:link偽類(lèi)作用于未點(diǎn)擊過(guò)的鏈接標(biāo)簽。:hover偽類(lèi)作用于點(diǎn)擊過(guò)的鏈接。 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

7. X+Y

  1. ul + p {  
  2.       color: red;  
  3.    }  

相鄰選擇器，上述代碼中就會(huì)匹配在ul后面的***個(gè)p，將段落內(nèi)的文字顏色設(shè)置為紅色。(只匹配***個(gè)元素) 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

8. X>Y

  1. div#container > ul {  
  2.      border: 1px solid black;  
  3.    }   
  4.  
  5. <div id="container">  
  6.       <ul>  
  7.          <li> List Item  
  8.            <ul>  
  9.               <li> Child </li>  
  10.            </ul>  
  11.          </li>  
  12.          <li> List Item </li>  
  13.          <li> List Item </li>  
  14.          <li> List Item </li>  
  15.       </ul>   
  16. </div> 

子選擇器。與后代選擇器X Y不同的是，子選擇器只對(duì)X下的直接子級(jí)Y起作用。在上面的css和html例子中，div#container>ul僅對(duì)container中最近一級(jí)的ul起作用。從理論上來(lái)講X > Y是值得提倡選擇器，可惜IE6不支持。 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

9. X ~ Y

  1. ul ~ p {  
  2.       color: red;  
  3.    } 

相鄰選擇器，與前面提到的X+Y不同的是，X~Y匹配與X相同級(jí)別的所有Y元素，而X+Y只匹配***個(gè)。 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

10. X[title]

  1. a[title] {  
  2.       color: green;  
  3.    }  

屬性選擇器。比如上述代碼匹配的是帶有title屬性的鏈接元素。

兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

11. X[title="foo"]

  1. a[href="http://css9.net"] {  
  2.      color: #1f6053;   
  3. }  

屬性選擇器。 上面的代碼匹配所有擁有href屬性，且href為http://css9.net的所有鏈接。

這個(gè)功能很好，但是多少又有些局限。如果我們希望匹配href包含css9.net的所有鏈接該怎么做呢?看下一個(gè)選擇器。 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

12. X[title*="css9.net"]

  1. a[href*="css9.net"] {  
  2.      color: #1f6053;  
  3.    } 

屬性選擇器。正如我們想要的，上面代碼匹配的是href中包含"css9.net"的所有鏈接。

兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

13. X[href^="http"]

  1. a[href^="http"] {  
  2.       background: url(path/to/external/icon.png) no-repeat;  
  3.       padding-left: 10px;  
  4.    }  

屬性選擇器。上面代碼匹配的是href中所有以http開(kāi)頭的鏈接。 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

13. X[href$=".jpg"]

  1. a[href^="http"] {  
  2.       background: url(path/to/external/icon.png) no-repeat;  
  3.       padding-left: 10px;  
  4.    }  

屬性選擇器。在屬性選擇器中使用$，用于匹配結(jié)尾為特定字符串的元素。在上面代碼中匹配的是所有鏈接到擴(kuò)展名為.jpg圖片的鏈接。(注意，這里僅僅是.jpg圖片，如果要作用于所有圖片鏈接該怎么做呢，看下一個(gè)選擇器。)

兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

14. X[data-*="foo"]

在上一個(gè)選擇器中提到如何匹配所有圖片鏈接。如果使用X[href$=".jpg"]實(shí)現(xiàn)，需要這樣做：

  1. a[href$=".jpg"],  
  2. a[href$=".jpeg"],  
  3. a[href$=".png"],  
  4. a[href$=".gif"] {  
  5.      color: red;  
  6.   }  

看上去比較麻煩。另一個(gè)解決辦法是為所有的圖片鏈接加一個(gè)特定的屬性，例如‘data-file’

html代碼

  1. <a href="path/to/image.jpg" data-filetype="image"> 圖片鏈接 </a>   
  2. css代碼如下：  
  3. a[data-filetype="image"] {  
  4.       color: red;  
  5.    }  

這樣所有鏈接到圖片的鏈接字體顏色為紅色。

兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

#p#

15. X[foo~="bar"]

屬性選擇器。屬性選擇器中的波浪線(xiàn)符號(hào)可以讓我們匹配屬性值中用空格分隔的多個(gè)值中的一個(gè)?？聪旅胬樱?/p>

html代碼

  1. <a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>  

css代碼

  1. a[data-info~="external"] {  
  2.       color: red;  
  3.    }  
  4. a[data-info~="image"] {  
  5.       border: 1px solid black;  
  6.    }  

在上面例子中，匹配data-info屬性中包含“external”鏈接的字體顏色為紅色。匹配data-info屬性中包含“image”的鏈接設(shè)置黑色邊框。

兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

17. X:checked

checked偽類(lèi)用來(lái)匹配處于選定狀態(tài)的界面元素，如radio、checkbox。

  1. input[type=radio]:checked {  
  2.       border: 1px solid black;  
  3.    }  

上面代碼中匹配的是所有處于選定狀態(tài)的單選radio，設(shè)置1px的黑色邊框。

兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera

18. X:after和X:before

這兩個(gè)偽類(lèi)與content結(jié)合用于在元素的前面或者后面追加內(nèi)容，看一個(gè)簡(jiǎn)單的例子：

  1. h1:after {content:url(/i/logo.gif)}  

上面的代碼實(shí)現(xiàn)了在h1標(biāo)題的后面顯示一張圖片。

我們也經(jīng)常用它來(lái)實(shí)現(xiàn)清除浮動(dòng)，寫(xiě)法如下：

  1. .clearfix:after {  
  2.        content: "";  
  3.        display: block;  
  4.        clear: both;  
  5.        visibility: hidden;  
  6.        font-size: 0;  
  7.        height: 0;   
  8.       }         
  9. .clearfix {  
  10.       *display: inline-block;   
  11.      _height: 1%;  
  12.    } 

19. X:hover

  1. div:hover {  
  2.      background: #e3e3e3;  
  3.    }  

:hover偽類(lèi)設(shè)定當(dāng)鼠標(biāo)劃過(guò)時(shí)元素的樣式。上面代碼中設(shè)定了div劃過(guò)時(shí)的背景色。

需要注意的是，在ie 6中，:hover只能用于鏈接元素。

這里分享一個(gè)經(jīng)驗(yàn)，在設(shè)定鏈接劃過(guò)時(shí)出現(xiàn)下滑線(xiàn)時(shí)，使用border-bottom會(huì)比text-decoration顯得更漂亮些。代碼如下：

  1. a:hover {  
  2.     border-bottom: 1px solid black;  
  3.    }  

兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera

20. X:not(selector)

  1. div:not(#container) {  
  2.       color: blue;  
  3.    } 

否定偽類(lèi)選擇器用來(lái)在匹配元素時(shí)排除某些元素。在上面的例子中，設(shè)定除了id為container的div元素字體顏色為blue。

兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera

21. X::pseudoElement

::偽類(lèi)用于給元素片段添加樣式。比如一個(gè)段落的***個(gè)字母或者***行。需要注意的是，這個(gè)::偽類(lèi)只能用于塊狀元素。

下面的代碼設(shè)定了段落中***個(gè)字母的樣式：

  1. p::first-letter {  
  2.       float: left;  
  3.       font-size: 2em;  
  4.       font-weight: bold;  
  5.       font-family: cursive;  
  6.       padding-right: 2px;  
  7.    }  

下面的代碼中設(shè)定了段落中***行的樣式：

  1. p::first-line {  
  2.       font-weight: bold;  
  3.       font-size: 1.2em;   
  4.   }  

兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera

(IE6竟然支持，有些意外啊。)

22. X:nth-child(n)

  1. li:nth-child(3) {  
  2.       color: red;  
  3.    }  

這個(gè)偽類(lèi)用于設(shè)定一個(gè)序列元素(比如li、tr)中的第n個(gè)元素(從1開(kāi)始算起)的樣式。在上面例子中，設(shè)定第三個(gè)列表元素li的字體顏色為紅色。

看一個(gè)更靈活的用法，在下面例子中設(shè)定第偶數(shù)個(gè)元素的樣式，可以用它來(lái)實(shí)現(xiàn)隔行換色：

  1. tr:nth-child(2n) {  
  2.       background-color: gray;  
  3.    }  

兼容瀏覽器：IE9+、Firefox、Chrome、Safari

23. X:nth-last-child(n)

  1. li:nth-last-child(2) {  
  2.       color: red;  
  3.    }  

與X:nth-child(n)功能類(lèi)似，不同的是它從一個(gè)序列的***一個(gè)元素開(kāi)始算起。上面例子中設(shè)定倒數(shù)第二個(gè)列表元素的字體顏色。

兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera

24. X:nth-of-type(n)

  1. ul:nth-of-type(3) {  
  2.       border: 1px solid black;  
  3.    }  

與X:nth-child(n)功能類(lèi)似，不同的是它匹配的不是某個(gè)序列元素，而是元素類(lèi)型。例如上面的代碼設(shè)置頁(yè)面中出現(xiàn)的第三個(gè)無(wú)序列表ul的邊框。

兼容瀏覽器：IE9+、Firefox、Chrome、Safari

25. X:nth-last-of-type(n)

  1. ul:nth-last-of-type(3) { border: 1px solid black; } 

與X:nth-of-type(n)功能類(lèi)似，不同的是它從元素***一次出現(xiàn)開(kāi)始算起。上面例子中設(shè)定倒數(shù)第三個(gè)無(wú)序列表的邊框

兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera

26. X:first-child

:first-child偽類(lèi)用于匹配一個(gè)序列的***個(gè)元素。我們經(jīng)常用它來(lái)實(shí)現(xiàn)一個(gè)序列的***個(gè)元素或***一個(gè)元素的上(下)邊框，如：

  1. ul:nth-last-of-type(3) {  
  2.       border: 1px solid black;  
  3.    }  

兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

27. X:last-child

  1. ul > li:last-child {  
  2.       border-bottom:none;  
  3.   } 

與:first-child類(lèi)似，它匹配的是序列中的***一個(gè)元素。

兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera

28. X:only-child

  1. div p:only-child {  
  2.       color: red;  
  3.    } 

這個(gè)偽類(lèi)用的比較少。在上面例子中匹配的是div下有且僅有一個(gè)的p，也就是說(shuō)，如果div內(nèi)有多個(gè)p，將不匹配。

  1. <div><p> My paragraph here. </p></div>  
  2.  
  3. <div>  
  4.       <p> Two paragraphs total. </p>  
  5.       <p> Two paragraphs total. </p>  
  6. </div> 

在上面代碼中***個(gè)div中的段落p將會(huì)被匹配，而第二個(gè)div中的p則不會(huì)。

兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera

29. X:only-of-type

  1. li:only-of-type {  
  2.       font-weight: bold;  
  3.    }  

這個(gè)偽類(lèi)匹配的是，在它上級(jí)容器下只有它一個(gè)子元素，它沒(méi)有鄰居元素。例如上面代碼匹配僅有一個(gè)列表項(xiàng)的列表元素。

兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera

30. X:first-of-type

:first-of-type偽類(lèi)與:nth-of-type(1)效果相同，匹配出現(xiàn)的***個(gè)元素。我們來(lái)看個(gè)例子：

  1. <div> 
  2.       <p> My paragraph here. </p> 
  3.       <ul> 
  4.          <li> List Item 1 </li> 
  5.          <li> List Item 2 </li> 
  6.       </ul> 
  7.       <ul> 
  8.          <li> List Item 3 </li> 
  9.          <li> List Item 4 </li> 
  10.       </ul>   
  11. </div> 

在上面的html代碼中，如果我們希望僅匹配List Item 2列表項(xiàng)該如何做呢：

方案一：

  1. ul:first-of-type > li:nth-child(2) {  
  2.       font-weight: bold;   
  3.   }  

方案二：

  1. p + ul li:last-child {  
  2.       font-weight: bold;  
  3.    }  

方案三：

  1. ul:first-of-type li:nth-last-child(1) {  
  2.       font-weight: bold;  
  3.    }  

兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera。

總結(jié)：

如果你正在使用老版本的瀏覽器，如IE 6，在使用上面css選擇器時(shí)一定要注意它是否兼容。不過(guò)，這不應(yīng)成為阻止我們學(xué)習(xí)使用它的理由。在設(shè)計(jì)時(shí)，你可以參考瀏覽器兼容性列表，也可以通過(guò)腳本手段讓老版本的瀏覽器也支持它們。

另一點(diǎn)，我們?cè)谑褂胘avascript類(lèi)庫(kù)的選擇器時(shí)，例如jquery，要盡可能的使用這些原生的css3選擇器，因?yàn)轭?lèi)庫(kù)的選擇器引擎會(huì)通過(guò)瀏覽器內(nèi)置解析它們，這樣會(huì)獲得更快的速度。

原文：http://www.cnblogs.com/yiyuanke/archive/2011/10/22/CSS.html

【編輯推薦】

  1. 推薦10個(gè)加速CSS開(kāi)發(fā)的框架
  2. 44個(gè)驚人的超炫CSS3動(dòng)畫(huà)演示
  3. 20個(gè)HTML 5和CSS3的免費(fèi)網(wǎng)站模板與教程
  4. 27 款經(jīng)典的CSS框架 附下載
  5. 15個(gè)國(guó)外***的CSS框架（附下載）
責(zé)任編輯：陳貽新 來(lái)源： 大范甘迪博客
CSS
相關(guān)推薦

2010-09-08 15:59:51

CSS選擇器CSS

2010-09-03 09:21:38

CSS選擇器

2010-09-07 11:14:32

CSS屬性選擇器CSS

2013-03-11 10:30:56

CSSWeb

2023-03-16 10:20:55

CSS選擇器

2010-09-03 09:30:29

CSS選擇器

2010-08-26 12:47:15

CSSclass類(lèi)

2010-09-06 08:52:00

CSS選擇器

2023-01-30 08:42:33

CSS選擇器性能

2010-09-02 11:26:33

CSS選擇器偽類(lèi)

2010-08-30 14:47:47

CSS選擇器

2020-10-25 08:57:56

CSS前端瀏覽器

2019-10-22 15:27:58

前端開(kāi)發(fā)技術(shù)

2023-09-06 18:37:45

CSS選擇器符號(hào)

2025-02-12 08:27:49

CSS選擇器ID

2010-09-02 15:12:28

CSS屬性值選擇器

2022-04-14 09:01:19

CSS父選擇器CSS類(lèi)

2022-04-01 09:02:19

CSS選擇器HTML

2010-09-06 09:41:28

CSS繼承

2010-09-06 09:57:01

CSS類(lèi)選擇器CSS
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)