CSS3中的選擇符有哪些

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

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

CSS3選擇符語法概覽：

選擇符類型

表達(dá)式

描述

子串匹配的屬性選擇符

E[att^="val"]

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

子串匹配的屬性選擇符

E[att$="val"]

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

子串匹配的屬性選擇符

E[att*="val"]

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

結(jié)構(gòu)性偽類

E:root

匹配文檔的根元素。在HTML中，根元素永遠(yuǎn)是HTML

結(jié)構(gòu)性偽類

E:nth-child(n)

匹配父元素中的第n個(gè)子元素E

結(jié)構(gòu)性偽類

E:nth-last-child(n)

匹配父元素中的倒數(shù)第n個(gè)結(jié)構(gòu)子元素E

結(jié)構(gòu)性偽類

E:nth-of-type(n)

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

結(jié)構(gòu)性偽類

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

匹配同類型中的倒數(shù)第n個(gè)同級兄弟元素E

結(jié)構(gòu)性偽類

E:last-child

匹配父元素中最后一個(gè)E元素

結(jié)構(gòu)性偽類

E:first-of-type

匹配同級兄弟元素中的第一個(gè)E元素

結(jié)構(gòu)性偽類

E:only-child

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

結(jié)構(gòu)性偽類

E:only-of-type

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

結(jié)構(gòu)性偽類

E:empty

匹配沒有任何子元素（包括text節(jié)點(diǎn)）的元素E

目標(biāo)偽類

E:target

匹配相關(guān)URL指向的E元素

UI元素狀態(tài)偽類

E:enabled

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

UI元素狀態(tài)偽類

E:disabled

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

UI元素狀態(tài)偽類

E:checked

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

UI元素狀態(tài)偽類

E::selection

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

否定偽類

E:not(s)

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

通用兄弟元素選擇器

E ~ F

匹配E元素之后的F元素

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

子串匹配的屬性選擇符

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

假設(shè)HTML文檔中包含下面的代碼結(jié)構(gòu)：

<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>

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

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

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

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

要找到id以primary結(jié)尾的div元素，可以使用下面的規(guī)則：

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

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

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

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

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

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

目標(biāo)偽類

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

還是以上面提到的代碼結(jié)構(gòu)為例，如果URL中包含content-primary標(biāo)識時(shí)，現(xiàn)在的規(guī)則將會在他外圍增加一個(gè)邊框：

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

URL是類似這樣的形式的：

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

基于Mozilla和Safari的瀏覽器已經(jīng)支持:target偽類。

UI元素狀態(tài)偽類

:ENABLED偽類和:DISABLED偽類

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

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

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

:CHECKED偽類

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

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

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

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

結(jié)構(gòu)性偽類

結(jié)構(gòu)性偽類允許開發(fā)者根據(jù)文檔樹中表明的結(jié)構(gòu)來指定元素，而這些使用簡單選擇符或者是混合選擇符都無法做到。結(jié)構(gòu)性偽類功能十分強(qiáng)大，但是不幸的是現(xiàn)代瀏覽器僅提供了有限的支持。

:ROOT偽類

:root偽類指向的是文檔的根元素。在HTML中，文檔的根元素始終是HTML，也就是說現(xiàn)在的兩條規(guī)則其實(shí)是一樣的（大體上說來:root要比html更專業(yè)點(diǎn)）。

:root { background:#ff0; } 

 html { background:#ff0; } 

:NTH-CHILD()偽類

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

數(shù)字b指是的第b個(gè)子元素。下面的規(guī)則將會應(yīng)用到父元素下所有p元素中的第三個(gè)中：

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

關(guān)鍵字odd（奇數(shù)）和even（偶數(shù)）可以用來匹配序號為奇數(shù)或者是偶數(shù)的子元素。第一個(gè)元素的序號為1，因?yàn)橄旅娴囊?guī)則將會匹配第1、3、5...了子元素p：

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

下面的規(guī)則則匹配第2、4、6...個(gè)字元素p：

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

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

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

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

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

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

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

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

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

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

:nth-of-type()

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

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

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

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

:nth-last-of-type偽類

:nth-last-of-type偽類指向的元素在其后還有若干同類型的元素。和:nth－last-child偽類一樣，它是從最后一個(gè)子元素向回?cái)?shù)的。下面的規(guī)則將會匹配到倒數(shù)第二個(gè)兄弟元素p中（注意：是兄弟、同級別的節(jié)點(diǎn)）：

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

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

:last-child偽類

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

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

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

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