今天就跟大家聊聊有關(guān)如何進行常用CSS選擇器的解析，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)是一家專業(yè)提供安義企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、做網(wǎng)站、H5頁面制作、小程序制作等業(yè)務(wù)。10年已為安義眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進行中。

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

1. *

* {      margin: 0;      padding: 0;     }

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

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

上面的代碼中會應(yīng)用于id為container元素的所有子元素中。 除非必要，我不建議在頁面中過的的使用星狀選擇符，因為他的作用域太大，相當(dāng)耗瀏覽器資源。 兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera

2. #X

#container {        width: 960px;        margin: auto;     }

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

3. .X

.error {       color: red;     }

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

4. X Y

li a {       text-decoration: none;     }

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

5. X

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

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

6. X:visited和X:link

a:link { color: red; }     a:visted { color: purple; }

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

7. X+Y

ul + p {        color: red;     }

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

8. X>Y

div#container > ul {       border: 1px solid black;     }    <div id="container">        <ul>           <li> List Item             <ul>                <li> Child </li>             </ul>           </li>           <li> List Item </li>           <li> List Item </li>           <li> List Item </li>        </ul>   </div>

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

9. X ~ Y

ul ~ p {        color: red;     }

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

10. X[title]

a[title] {        color: green;     }

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

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

11. X[title="foo"]

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

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

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

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

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

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

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

13. X[href^="http"]

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

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

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

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

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

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

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

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

a[href$=".jpg"],  a[href$=".jpeg"],  a[href$=".png"],  a[href$=".gif"] {       color: red;    }

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

html代碼

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

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

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

15. X[foo~="bar"]

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

html代碼

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

css代碼

a[data-info~="external"] {        color: red;     }  a[data-info~="image"] {        border: 1px solid black;     }

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

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

17. X:checked

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

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

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

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

18. X:after和X:before

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

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

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

我們也經(jīng)常用它來實現(xiàn)清除浮動，寫法如下：

.clearfix:after {         content: "";         display: block;         clear: both;         visibility: hidden;         font-size: 0;         height: 0;         }         .clearfix {        *display: inline-block;        _height: 1%;     }

19. X:hover

div:hover {       background: #e3e3e3;     }

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

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

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

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

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

20. X:not(selector)

div:not(#container) {        color: blue;     }

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

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

21. X::pseudoElement

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

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

p::first-letter {        float: left;        font-size: 2em;        font-weight: bold;        font-family: cursive;        padding-right: 2px;     }

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

p::first-line {        font-weight: bold;        font-size: 1.2em;     }

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

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

22. X:nth-child(n)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

26. X:first-child

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

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

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

27. X:last-child

ul > li:last-child {        border-bottom:none;    }

與:first-child類似，它匹配的是序列中的***一個元素。

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

28. X:only-child

div p:only-child {        color: red;     }

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

<div><p> My paragraph here. </p></div>   <div>        <p> Two paragraphs total. </p>        <p> Two paragraphs total. </p>  </div>

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

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

29. X:only-of-type

li:only-of-type {        font-weight: bold;     }

這個偽類匹配的是，在它上級容器下只有它一個子元素，它沒有鄰居元素。例如上面代碼匹配僅有一個列表項的列表元素。

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

30. X:first-of-type

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

<div>       <p> My paragraph here. </p>       <ul>          <li> List Item 1 </li>          <li> List Item 2 </li>       </ul>       <ul>          <li> List Item 3 </li>          <li> List Item 4 </li>       </ul>   </div>

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

方案一：

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

方案二：

p + ul li:last-child {        font-weight: bold;     }

方案三：

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

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

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

另一點，我們在使用javascript類庫的選擇器時，例如jquery，要盡可能的使用這些原生的css3選擇器，因為類庫的選擇器引擎會通過瀏覽器內(nèi)置解析它們，這樣會獲得更快的速度。

看完上述內(nèi)容，你們對如何進行常用CSS選擇器的解析有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

分享標(biāo)題：如何進行常用CSS選擇器的解析
文章源于：http://jinyejixie.com/article4/iisgie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、搜索引擎優(yōu)化、面包屑導(dǎo)航、商城網(wǎng)站、網(wǎng)站排名、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)