CSS進階選擇器的詳解

        CSS是網頁設計者可用的最強大的工具之一。使用它我們可以在幾分鐘內改變一個網站的介面，而不用改變頁面的標籤。但儘管事實上，我們每個人也都意識到了它是有用的，CSS 選擇器遠未發揮它們的潛力，有的時候我們還趨向於使用過多的和無用的class、id、div、span等把我們的HTML搞的很凌亂。

避免讓這些「瘟疫」在你的標籤中傳播並保持其簡潔和語義化的最佳方式，就是使用更複雜的CSS選擇器，它們可以定位於指定的元素而不用使用額外的class或id，而且透過這種方式也可以讓我們的程式碼和樣式更有彈性。

CSS的優先順序

在深入研究高階CSS選擇器領域之前，理解CSS優先權是如何運作的是很重要的，這樣我們就知道如何適當的使用我們的選擇器並避免浪費大量的時間來調試一些只要我們注意到優先級的話就很容易被搞定的問題

當我們寫CSS的時候我們必須注意有些選擇器在級聯(cascade)上會高於其它選擇器，我們寫在最後面的選擇器將不一定會覆蓋前面我們寫在同一個元素的樣式。

那麼你要如何計算指定選擇器的優先權？如果你考慮到將優先權表示為用逗號隔開的四個數字就會相當簡單，例如：1, 1, 1, 1 或0, 2, 0, 1

第一個數字( a)通常是0，除非在標籤上使用style屬性；

第二個數字(b)是該選擇器上的id的數量的總和；

第三個數字( c)是用在該選擇器上的其它屬性選擇器和偽類的總和。這裡包括class (.example) 和屬性選擇器(例如li[id=red])；

第四個數字(d)計算元素(就像table、p、div等等)和偽元素(就像:first-line等)；

通用選擇器(*)是0優先級；

如果兩個選擇器有同樣的優先級，則在樣式表中後面的那個起作用。

讓我們來看幾個例子，這樣或許比較容易理解些：

#sidebar h2 — 0, 1, 0, 1

h2.title — 0, 0 , 1, 1

h2 + p — 0, 0, 0, 2

#sidebar p:first-line — 0, 1, 0, 2

在下面的例子中，第一個將會起作用，因為它比第二個優先級高：

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2

至少基本上理解優先級是如何工作的是很重要的，但是一些工具比如Firebug，在我們審查指定元素的時候，按照選擇器的優先順序列出所有的css選擇器對讓我們知道在指定元素上哪個選擇器是有效的是很有用的。

以下範例主要說明nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type使用。

範例程式碼：

76c82f278ac045591c9159d381de2c57f2fff6a208c3e290698f287c1c0e7a5393f0f5c25f18dab9d176bd4f6de5d30e03fc48c6e8e131d94ca98b8e034341f4b2386ffb911b14667cb8f0f91ea547a7CSS 高级选择器使用6e916e0f7d1e588d4f442bf645aedb2fc9ccee2e6ea535a969eb3f532ad9fe89* {padding: 0;margin: 0;}/*IE8不支持 IE9支持*/
            li:nth-child(3n+1) {color: red;}/*IE7+以上浏览器均支持*/
            li:first-child {color: blue;}/*IE8不支持 IE9以上支持*/
            li:last-child {color: green;}/*IE8不支持 IE9以上支持*/
            li:nth-of-type(odd) {color: #8D8D8D;}/*IE8不支持 IE9以上支持*/
            li:first-of-type {color: #92B8B1;}/*IE8不支持 IE9以上支持*/
            li:last-of-type {color: #2E2D3C;}531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86dff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6Item 1bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 2bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 3bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 4bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 5bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 6bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 7bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b94468936cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

#總結：

#除了first-child選擇器相容IE7+以上外，其他選擇器都需要IE9以上瀏覽器才能相容於。

以上是CSS進階選擇器的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！