CSS3中的選擇符有哪些

這篇“CSS3中的選擇符有哪些”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“CSS3中的選擇符有哪些”文章吧。

首先，快速瀏覽一下css3中新增的選擇符：

CSS3選擇符語法概覽：

選擇符類型

表達式

描述

子串匹配的屬性選擇符

E[att^="val"]

匹配具有att屬性、且值以val開頭的E元素

子串匹配的屬性選擇符

E[att$="val"]

匹配具有att屬性、且值以val結尾的E元素

子串匹配的屬性選擇符

E[att*="val"]

匹配具有att屬性、且值中含有val的E元素

結構性偽類

E:root

匹配文檔的根元素。在HTML中，根元素永遠是HTML

結構性偽類

E:nth-child(n)

匹配父元素中的第n個子元素E

結構性偽類

E:nth-last-child(n)

匹配父元素中的倒數第n個結構子元素E

結構性偽類

E:nth-of-type(n)

匹配同類型中的第n個同級兄弟元素E

結構性偽類

E:nth-last-of-type(n)

匹配同類型中的倒數第n個同級兄弟元素E

結構性偽類

E:last-child

匹配父元素中最后一個E元素

結構性偽類

E:first-of-type

匹配同級兄弟元素中的第一個E元素

結構性偽類

E:only-child

匹配屬于父元素中唯一子元素的E

結構性偽類

E:only-of-type

匹配屬于同類型中唯一兄弟元素的E

結構性偽類

E:empty

匹配沒有任何子元素（包括text節點）的元素E

目標偽類

E:target

匹配相關URL指向的E元素

UI元素狀態偽類

E:enabled

匹配所有用戶界面（form表單）中處于可用狀態的E元素

UI元素狀態偽類

E:disabled

匹配所有用戶界面（form表單）中處于不可用狀態的E元素

UI元素狀態偽類

E:checked

匹配所有用戶界面（form表單）中處于選中狀態的元素E

UI元素狀態偽類

E::selection

匹配E元素中被用戶選中或處于高亮狀態的部分

否定偽類

E:not(s)

匹配所有不匹配簡單選擇符s的元素E

通用兄弟元素選擇器

E ~ F

匹配E元素之后的F元素

如果對上面的描述還不是很清楚的，請不要擔心。本文下面的部分將會對他們進行更加詳細的講解，并且提供例子來演示他們是怎么使用的。

子串匹配的屬性選擇符

這一組的選擇符都新加的，他允許開發者對屬性中的子字符串來進行匹配。

假設HTML文檔中包含下面的代碼結構：

<div id="nav-primary"></div> 

 <div id="content-primary"></div> 

 <div id="content-secondary"></div> 

 <div id="tertiary-content"></div> 

 <div id="nav-secondary"></div>

通過使用子串匹配的屬性選擇符就可以找到文檔中這些結構性的特定組合。

下面的規則將為id以“nav”開頭的div元素設定背景顏色：

div[id^="nav"] { background:#ff0; } 

上例中選擇符會匹配div#nav-primary和div#nav-secondary。

要找到id以primary結尾的div元素，可以使用下面的規則：

div[id$="primary"] { background:#ff0; }

這時選擇符將匹配div#nav-primary和div#content-primary。

下面的規則將會匹配到id中含有content子字符串的的div中：

div[id*="content"] { background:#ff0; }

受影響的元素有：div#content-primary、div#content-secondary和div#tertiary-content。

子串匹配的屬性選擇符已經在最新版本的Mozilla、Firefox、Flock、Camino、Safari、OmniWeb以及Opera中可以使用，但是如果IE中還不支持的話，我們最好還是先不要使用他們（作者在寫這篇文章時IE還在開發中，如今IE7、IE8都支持這些選擇符，dudo注）。

目標偽類

含有識別標識的url（一個#后面緊跟錨點名稱或者元素的id）指向的是文檔中的特定元素。鏈向其他目標元素的這些元素就可以使用:target偽類來修飾它。如果當前的URL中沒有任何的片斷識別標識，:target偽類將不會匹配任何元素。

還是以上面提到的代碼結構為例，如果URL中包含content-primary標識時，現在的規則將會在他外圍增加一個邊框：

div#content-primary:target { outline:1px solid #300; }

URL是類似這樣的形式的：

http://www.example.com/index.html#content-primary。

基于Mozilla和Safari的瀏覽器已經支持:target偽類。

UI元素狀態偽類

:ENABLED偽類和:DISABLED偽類

在瀏覽器允許改變表單控件外觀的前提下，:enabled偽類和:disable偽類允許開發者指定用戶界面中可用和不可用元素（表單元素）的顯示樣式。下面的規則將會根據單行輸入框是否可用設定不同的背景顏色：

input[type="text"]:enabled { background:#ffc; } 

 input[type="text"]:disabled { background:#ddd; }

:CHECKED偽類

:checked偽類允許開發者為處于選中狀態的checkbox和radio設定樣式。當然這也要在瀏覽器允許改變表單控件外觀的條件下。下面的CSS規則將會使選中的radio和checkbox元素顯示一個綠色邊框：

input:checked { border:1px solid #090; }

UI元素狀態偽類目前可以在Opera和基于Mozilla的瀏覽器中使用。

要注意的是，許多瀏覽器對于開發者對表單控件樣式的改變有著嚴格的限制。更多關于這方便的內容可以我的兩篇文章：《樣式化表單控件》和《樣式化更多表單控件》。

結構性偽類

結構性偽類允許開發者根據文檔樹中表明的結構來指定元素，而這些使用簡單選擇符或者是混合選擇符都無法做到。結構性偽類功能十分強大，但是不幸的是現代瀏覽器僅提供了有限的支持。

:ROOT偽類

:root偽類指向的是文檔的根元素。在HTML中，文檔的根元素始終是HTML，也就是說現在的兩條規則其實是一樣的（大體上說來:root要比html更專業點）。

:root { background:#ff0; } 

 html { background:#ff0; } 

:NTH-CHILD()偽類

:nth-child()偽類指向的元素在文檔樹中有一定數量的兄弟元素存在。其中括號內的參數，可以是一個數字，也可以一個關鍵字或者一個公式。

數字b指是的第b個子元素。下面的規則將會應用到父元素下所有p元素中的第三個中：

p:nth-child(3) { color:#f00; }

關鍵字odd（奇數）和even（偶數）可以用來匹配序號為奇數或者是偶數的子元素。第一個元素的序號為1，因為下面的規則將會匹配第1、3、5...了子元素p：

p:nth-child(odd) { color:#f00; }

下面的規則則匹配第2、4、6...個字元素p：

p:nth-child(even) { color:#f00; }

表達式an+b可以用來創建更加復雜的循環模式。在表達式中，a代表步長，n是一個從0開始的計數器，b代表偏移量。其中，所有的數值都必須是整數（這里，n是從0開始的，和js等中的循環不同的是，至于到多少結束取決于元素的個數決定，如文檔中有20個元素，3n(n=1,2...)就會分別選擇第3、6、9、...18個元素，n此時為6 ，dudo注）。為了更好理解如何使用表達式我們先看幾個代碼實例：

下面的規則將會匹配序號數為3的倍數的所有p元素。在第一行中，b等于0，因此可以忽略不寫（見第二行）：

p:nth-child(3n+0) { color:#f00; } 

 p:nth-child(3n) { color:#f00; }

偏移量可以用來指定樣式的循環是從哪個元素開始應用的。如果有一個20行的表格，我們希望從第10行以后的奇數行開始使用不同的背景顏色，就可以使用下面這條規則：

tr:nth-child(2n+11) { background:#ff0; }

由于n是從為開始的，因此第一個受影響的tr元素的序號是11（2*0+11＝11,dudo注）。接下來就是第13行（2*1+11=13）再接下來就第15行（2*2+11＝15），以此類推。

更詳細介紹請參照CSS 3選擇符中的《nth-child()偽類》。

那么，對于這樣有用的一個選擇符又有哪些瀏覽器支持它呢？很糟糕，據我所知，沒有一個瀏覽器支持這個選擇符甚至沒有瀏覽器支持nth類的選擇符。如果有的話請幫我指正（Firefox3和IE8目前是否支持？dudo）

:nth-of-type()

:nth-of-type()偽類和nth-child()偽類找使用方法十分相似，只不過他匹配的是規則中指明類型的元素。下面的規則將會匹配每個屬于父元素中第三個子元素的p元素（屬于第3個子元素的p在一個該當中可能會有很多，只不過他們位于不同的父元素下，dudo注）：

p:nth-of-type(3) { background:#ff0; }

當你想確定是否已經指向了第三個p元素，這種方法會很有用。開始你可能覺得這和使用nth-child效果是一樣的，但是nth-child(3)會把所有的子元素都計算進來，因此結果可能就會不一樣，除非p所有的所有兄弟元素也都是p元素。

:nth-of-type偽類目前還沒有瀏覽器支持。

:nth-last-of-type偽類

:nth-last-of-type偽類指向的元素在其后還有若干同類型的元素。和:nth－last-child偽類一樣，它是從最后一個子元素向回數的。下面的規則將會匹配到倒數第二個兄弟元素p中（注意：是兄弟、同級別的節點）：

p:nth-last-of-type(2) { background:#ff0; }

:nth-last-of-type()目前還沒有瀏覽器支持。

:last-child偽類

:last偽類指向的是父元素中最后一個子元素。它和:nth-last-child(1)效果是一樣的。下面的規則匹配所有屬于父元素中最后一個子元素的p：

p:last-child { background:#ff0; }

:last-childe偽類可以在基于Mozilla的瀏覽器中使用。Opera不支持:last-childe偽類，在Safri中存在bug（上面的規則會匹配到所有的p元素）。令人稀奇是的它可以在OmniWeb（測試版本5.1.1）中正常使用，盡管這個瀏覽器是基于Safari的。這可能是因為Apple WebKit最新版本的回歸，因為OmniWeb使用的WebKit通常要比Safari版本稍微低一點。

以上就是關于“CSS3中的選擇符有哪些”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。