一文快速讀懂CSS屬性選擇器

用CSS選擇器說(shuō)明及實(shí)例分析

CSS選擇器（Selector）是用于實(shí)現(xiàn)網(wǎng)頁(yè)頁(yè)面定義的基礎(chǔ)，選擇器的主要作用在于確定指定的單個(gè)元素或者一類元素。在獲取元素之后即可以對(duì)所獲取的元素進(jìn)行樣式的定義。最終為用戶呈現(xiàn)不同交互視覺(jué)風(fēng)格的前端頁(yè)面。本文主要對(duì)常用CSS選擇器基本概念與常用屬性選擇器進(jìn)行說(shuō)明與實(shí)例展示。

CSS Selector類型劃分

按照W3C技術(shù)規(guī)范劃分目前CSS Selector主要類型可以劃分為基本選擇器、關(guān)系選擇器、偽選擇器三種類型不同的選擇器。目前主要CSS選擇器類型及分類描述如下圖所示：

CSS Selector分類圖

CSS Selector選擇器主要分類描述如上圖，其中我們較為常用的選擇器主要包括基本選擇器、關(guān)系選擇器及偽選擇器中的部分類型。總之，一句話概括的話：選擇器的作用就是從HTML文檔中找出需要設(shè)置樣式的一個(gè)或者多個(gè)HTML元素。

基本常用選擇器

本文中我們選取部分常用選擇器對(duì)其語(yǔ)法進(jìn)行簡(jiǎn)單說(shuō)明，并通過(guò)實(shí)例進(jìn)行應(yīng)用說(shuō)明與展示。

（一）基本選擇器

基本選擇器中元素選擇器、類選擇器與ID選擇器是較為常用選擇器，也是大部分教材中詳細(xì)介紹過(guò)的選擇器類型。常用基本選擇器描述如下圖：

基本選擇器中常用類型說(shuō)明

屬性選擇器

在基本選擇器中以上4類為常用選擇器，除此之外初學(xué)者使用較少但非常重要的選擇器為屬性選擇器。屬性選擇器主要根據(jù)元素的屬性確定選擇元素并進(jìn)行樣式的設(shè)置。屬性選擇器主要類型包括7種不同類型選擇器，描述如下圖所示：

CSS 屬性選擇器

CSS屬性選擇器常用的其中方法描述如上圖所示，通過(guò)屬性值的選擇方式確定選中的元素，進(jìn)而實(shí)現(xiàn)元素樣式的設(shè)置。屬性選擇器說(shuō)明如下：

常用屬性選擇器說(shuō)明

以下我們通過(guò)實(shí)例進(jìn)行說(shuō)明，HTML代碼描述如下：

示例代碼

我們?cè)陧?yè)面中添加6個(gè)不同層，并設(shè)置其基本樣式，如上圖所示，通過(guò)使用屬性選擇器實(shí)現(xiàn)樣式的改變。原始頁(yè)面效果如下圖：

原始頁(yè)面效果

1、[attr]選擇器

該選擇器主要根據(jù)屬性名稱確定選中的標(biāo)記，并對(duì)其進(jìn)行設(shè)置。我們將示例文件中的前三個(gè)div設(shè)置ID屬性并以此為選擇條件進(jìn)行DIV樣式修改。代碼部分如下：

<div id="a">1</div>
<div id="2">2</div>
<div id="3">3</div>

編寫選擇器如下：

[id]{background-color: red;}

通過(guò)該選擇器的使用可以準(zhǔn)確找到需要設(shè)置樣式的元素。最終實(shí)現(xiàn)效果如下圖所示：

[attr]選擇器

2、[attr=value]選擇器

以第一種選擇器相比較除屬性名稱之外還需要滿足取值等于value。如我們需要將上例中id值為2的DIV進(jìn)行樣式設(shè)置，則可直接編寫選擇器：

[attr="2"]{background-color:red;}

通過(guò)value值對(duì)attr屬性進(jìn)行篩選，最終找到符合條件的DIV實(shí)現(xiàn)背景顏色變化。測(cè)試效果如下：

[attr=value] 選擇器

3、[attr~=value]選擇器

該選擇器可以選擇對(duì)應(yīng)屬性attr的值為列表形式，且值列表中包含value值。如我們?cè)诙x樣式中對(duì)于多個(gè)類選擇器的使用一般寫法如下：

<div class="cl1 cl2 cl3" id="4">4</div>

上述代碼即符合多個(gè)屬性值，中間空格隔開(kāi)，因此我們可以編寫選擇器實(shí)現(xiàn)對(duì)這個(gè)DIV的選擇。實(shí)現(xiàn)代碼如下：

[class~="cl2"]{font-size: 36px;color:white; background-color: blue;}

我們選中該DIV實(shí)現(xiàn)樣式設(shè)置，最終呈現(xiàn)效果如下：

[attr~=value]選擇器

4、[attr|=value]選擇器

該選擇器主要對(duì)attr屬性取值為value或者以value-為前綴的元素進(jìn)行選擇。我們將第五個(gè)DIV代碼進(jìn)行修改描述如下：

<div class="pure-g pure-from">5</div>

如果要選擇這個(gè)DIV我們可以編寫以下選擇器，代碼如下：

[class|="pure"]{font-size: 36px;color:white; background-color: gray;}

通過(guò)以上選擇器及樣式編寫，可將第五個(gè)DIV樣式進(jìn)行修改，顯示結(jié)果如下：

[attr|=value]選擇器

5、[attr^=value]選擇器

該選擇器基本與|value選擇器類似，只是要求取值為value開(kāi)頭的值。我們修改第六個(gè)DIV的代碼如下：

<div id="mytest">6</div>

通過(guò)編寫選擇器，在value中包含my進(jìn)行測(cè)試，選擇器代碼如下：

[id^="my"]{font-size: 36px;color:white; background-color: yellow;}

代碼中我們修改了背景顏色為黃色，測(cè)試結(jié)果如下所示：

[attr^=value]選擇器

6、[attr*=value]選擇器

該選擇器要求屬性attr對(duì)應(yīng)的屬性值中包含value，如果包含則選中該元素。我們將第二個(gè)DIV進(jìn)行代碼編寫，如下：

<div class="val1 val2 val3">2</div>

我們定義如下選擇器：

[class*="val1"]{background-color:magenta;}

通過(guò)以上選擇器我們可以選中第二個(gè)DIV，并實(shí)現(xiàn)樣式設(shè)置，我們將背景顏色改為magenta。實(shí)現(xiàn)效果如下：

6、[attr*=value]選擇器

7、[attr$=value]選擇器

該方法用于選擇attr屬性值中以value結(jié)尾的元素。我們將第三個(gè)DIV代碼進(jìn)行修改，如下：

<div id="mylast">3</div>

編寫選擇器代碼如下：

[id$="last"]{background-color:steelblue;}

通過(guò)該選擇器可以選擇第三個(gè)DIV并對(duì)其背景顏色進(jìn)行設(shè)置，測(cè)試結(jié)果如下：

[attr$=value]選擇器

以上給出了常用的基本屬性選擇器與屬性選擇器的說(shuō)明及實(shí)例分析。下篇文章我們將對(duì)關(guān)系選擇器進(jìn)行說(shuō)明。

本頭條號(hào)長(zhǎng)期關(guān)注編程資訊分享；編程課程、素材、代碼分享及編程培訓(xùn)。如果您對(duì)以上方面有興趣或代碼錯(cuò)誤、建議與意見(jiàn)，可在評(píng)論區(qū)回復(fù)。更多程序設(shè)計(jì)相關(guān)教程及實(shí)例分享，期待大家關(guān)注與閱讀！相關(guān)文章鏈接如下：

Web前端設(shè)計(jì)-JavaScript動(dòng)態(tài)設(shè)置CSS樣式實(shí)例分析

前端設(shè)計(jì)-JavaScript實(shí)現(xiàn)復(fù)選框的分組單選

SS是前端重要的組成部分，它能幫助我們通過(guò)選擇器給標(biāo)簽添加各種樣式效果。大家可能工作中最常用的選擇器都是id、class以及標(biāo)簽選擇器，但是當(dāng)面對(duì)一些復(fù)雜的項(xiàng)目場(chǎng)景時(shí)，僅僅用這幾個(gè)基礎(chǔ)選擇器去操作就會(huì)很麻煩。為了在開(kāi)發(fā)中更加得心應(yīng)手，本文我們就來(lái)看看CSS中的選擇器都有哪些以及如何去靈活運(yùn)用。

一、初級(jí)選擇器

1.1 基礎(chǔ)選擇器

通配符（*）選擇器

語(yǔ)法：*{屬性：屬性值；}

說(shuō)明：*表示頁(yè)面中所有的元素（標(biāo)簽），我們常用來(lái)重置樣式。

實(shí)例：

margin: 0;

padding: 0;

}

標(biāo)簽（元素）選擇器

語(yǔ)法：標(biāo)簽名{屬性：屬性值；}

說(shuō)明：標(biāo)簽選擇器就是使用結(jié)構(gòu)中元素名稱直接作為選擇符。

實(shí)例：

div{

width: 100px;

height: 100px;

}

類（class）選擇器

語(yǔ)法：.class名{屬性：屬性值；}

說(shuō)明：當(dāng)我們使用類選擇器時(shí)，需要先為相應(yīng)的元素添加class屬性。他的屬性值就是我們要使用類名。

實(shí)例：

.title {

color: red;

}

注意：類名要盡量使用英文表示，不能使用數(shù)字或中文命名，并且盡量起一些有意義的名字，讓別人能一眼看出來(lái)這個(gè)類名的作用。

類名可以有多個(gè)，多個(gè)類名之間要使用空格隔開(kāi)。我們可以把一些標(biāo)簽元素相同的樣式放到一個(gè)類調(diào)用，從而節(jié)省CSS代碼，例如版心可以寫統(tǒng)一樣式。

id選擇器

語(yǔ)法：#id名{屬性：屬性值；}

說(shuō)明：id選擇器是使用元素身上的id屬性作為選擇符。所以想要使用id選擇器，需要先為元素上定義id屬性。

實(shí)例：

定義好id之后就可使用#box給對(duì)應(yīng)的div上添加：

#box {

width: 100px;

height: 100px;

background-color: pink;

}

注意：起id名時(shí)不能用關(guān)鍵字（所有標(biāo)簽和屬性都是關(guān)鍵字），并且一個(gè)id名稱只能對(duì)應(yīng)文檔中一個(gè)具體的元素對(duì)象，因?yàn)閕d的特殊性，只能代表頁(yè)面中某一個(gè)唯一的元素對(duì)象，就好比我們的身份證號(hào)，一個(gè)人只能對(duì)應(yīng)一個(gè)唯一的id。

1.2 結(jié)構(gòu)選擇器

后代（包含）選擇器

語(yǔ)法：選擇器1（父）選擇器2（子）{屬性：屬性值；}

說(shuō)明：選擇器1和選擇器2中間用空格隔開(kāi)，表示選擇選擇器1中包含選擇器2的所有后代元素。

實(shí)例：

</div>

.box p {

color: red;

}

子代選擇器

語(yǔ)法：選擇器1>選擇器2{屬性：屬性值；}

說(shuō)明：用來(lái)選擇緊挨著選擇器1（父元素）的第一層符合選擇器2的子元素。

實(shí)例：

<div>

</div>

.box > h2 {

color: red;

}

全部兄弟選擇器

語(yǔ)法：選擇器1~選擇器2{屬性：屬性值；}

說(shuō)明：選擇當(dāng)前元素所有符合條件的兄弟元素。

實(shí)例：

</div>

p ~ h2 {

color: red;

}

注意：只能選中當(dāng)前元素后面的元素。

相鄰兄弟選擇器

語(yǔ)法：選擇器1+選擇器2{屬性：屬性值；}

說(shuō)明：選中當(dāng)前元素緊挨著的后面的兄弟元素。

實(shí)例：上面的案例修改成：

p + h2 {

color: red;

}

注意：只能選中當(dāng)前元素后面的元素，如果沒(méi)有緊挨著當(dāng)前元素就不會(huì)產(chǎn)生效果。

并集（群組）選擇器

語(yǔ)法：選擇器1，選擇器2{屬性：屬性值；}

說(shuō)明：用于對(duì)多個(gè)標(biāo)簽定義同樣的樣式，選擇器之間用逗號(hào)分隔。

實(shí)例：這里我們依然用上述的結(jié)構(gòu)：

h2 {

color: red;

}

交集選擇器

語(yǔ)法：選擇器1選擇器2{屬性：屬性值；}

說(shuō)明：用于選擇同時(shí)符合選擇器1和選擇器2條件的元素。

實(shí)例：

h2.title {

color: red;

}

二、屬性選擇器

屬性選擇器是通過(guò)元素的屬性以及屬性值來(lái)選擇對(duì)應(yīng)元素的，屬性名我們可以自己定義。

屬性的或運(yùn)算

語(yǔ)法：選擇器[屬性名]{屬性：屬性值；}

說(shuō)明：只要選擇器元素中有當(dāng)前屬性就會(huì)被選中。

實(shí)例：

.title[name] {

color: red;

}

屬性的與運(yùn)算

語(yǔ)法：選擇器[屬性1][屬性2]{屬性：屬性值；}

說(shuō)明：選擇同時(shí)包含屬性1和屬性2的元素。

實(shí)例：

h2[name][class] {

color: red;

}

屬性值的篩選

語(yǔ)法：選擇器[屬性名='要求']{屬性：屬性值；}

說(shuō)明：選擇對(duì)應(yīng)的屬性值符合要求的元素。

實(shí)例：

h2[class='title'] {

color: red;

}

前綴篩選^

語(yǔ)法：選擇器[屬性名^='要求']{屬性：屬性值；}

說(shuō)明：選擇屬性值以當(dāng)前要求開(kāi)頭的元素。

實(shí)例：

h2[class^='tit'] {

color: red;

}

后綴篩選$

語(yǔ)法：選擇器[屬性名$='要求']{屬性：屬性值；}

說(shuō)明：選擇屬性值以當(dāng)前要求結(jié)尾的元素。

實(shí)例：這里我們使用上述的結(jié)構(gòu)：

h2[class$='tle'] {

color: red;

}

包含限定*

語(yǔ)法：選擇器[屬性名*='要求']{屬性：屬性值；}

說(shuō)明：選擇屬性值包含當(dāng)前要求的元素。

實(shí)例：這里我們使用上述的結(jié)構(gòu)：

h2[class*='title'] {

color: red;

}

包含限定~

語(yǔ)法：選擇器[屬性名~='要求']{屬性：屬性值；}

說(shuō)明：選擇屬性值包含一個(gè)給定要求詞（單獨(dú)存在）的元素。

實(shí)例：

h2[class~='title'] {

color: red;

}

包含限定|

語(yǔ)法：選擇器[屬性名|='要求']{屬性：屬性值；}

說(shuō)明：選擇屬性值只有給定要求或者是以給定要求開(kāi)頭后面用“-”拼接其他字符串的元素。

實(shí)例：

h2[class|='title'] {

color: red;

}

三、偽類選擇器:

CSS偽類選擇器用于像某些元素添加特殊效果，比如第一個(gè)元素、某個(gè)元素的子元素、鼠標(biāo)滑過(guò)的元素。

3.1 動(dòng)態(tài)偽類選擇器

動(dòng)態(tài)偽類選擇器在日常工作中主要用于超鏈接標(biāo)簽。

說(shuō)明：前4個(gè)超鏈接偽類選擇器聯(lián)合使用時(shí)，就注意他們的順序，a:hover必須在a:link和a:visited之后，a:active必須在a:hover之后。錯(cuò)誤的順序有時(shí)會(huì)使超鏈接的樣式失效。

a:link{color:red;} /* 未訪問(wèn)的鏈接狀態(tài) */

a:visited{color:green;} /* 已訪問(wèn)的鏈接狀態(tài) */

a:hover{color:blue;} /*鼠標(biāo)滑過(guò)鏈接狀態(tài)*/

a:active{color:yellow;} /*鼠標(biāo)按下去時(shí)狀態(tài)*/

3.2 結(jié)構(gòu)偽類選擇器

結(jié)構(gòu)偽類指利用頁(yè)面的布局結(jié)構(gòu)選擇響應(yīng)的元素。

注意：結(jié)構(gòu)偽類選擇器中，子元素的序號(hào)是從1開(kāi)始的，所以，當(dāng)參數(shù)n的計(jì)算結(jié)果為0 時(shí)，將不選擇任何元素。

3.3 其他偽類選擇器

四、偽元素選擇器::

偽元素選擇器可以幫助我們利用CSS創(chuàng)建新的標(biāo)簽元素（偽元素），從而達(dá)到簡(jiǎn)化結(jié)構(gòu)的目的。

注意：利用before和after創(chuàng)建的元素屬于行內(nèi)元素，而這個(gè)元素我們不能在結(jié)構(gòu)中看到，所以稱它為偽元素。

五、選擇器權(quán)重

在CSS中我們用四位數(shù)字表示選擇器的權(quán)重，方便我們?nèi)ヅ袛鄻邮降膬?yōu)先級(jí)。

當(dāng)權(quán)重相同時(shí)，樣式遵循就近原則，CSS中哪個(gè)選擇器最后定義，就執(zhí)行哪個(gè)選擇器的樣式。

!important代表權(quán)重最高（最終的樣式）。

background-color：skyblue!important;

所以最終樣式的優(yōu)先級(jí)應(yīng)該為：

!important>行內(nèi)樣式>id選擇器>class選擇器=偽類選擇器=屬性選擇器>標(biāo)簽選擇器=偽元素選擇器>通配符選擇器>繼承樣式。

總結(jié)

以上就是為大家總結(jié)的CSS選擇器的種類及功能。總的來(lái)說(shuō)，碰到各種各樣的工作場(chǎng)景，我們需要靈活運(yùn)用這些選擇器，并且當(dāng)選擇器樣式?jīng)_突時(shí)，我們就得及時(shí)發(fā)現(xiàn)并且完成權(quán)重的解析從而解決問(wèn)題。解析規(guī)則大致如下：

當(dāng)不同選擇器的樣式設(shè)置有沖突時(shí)，高權(quán)重選擇器的樣式會(huì)覆蓋低權(quán)重選擇器的樣式。
相同權(quán)重的選擇器，樣式遵循就近原則。哪個(gè)選擇器樣式最后定義，就會(huì)采用哪個(gè)樣式。
需要注意，CSS具有繼承性，即子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式。但是繼承樣式?jīng)]有權(quán)重。所以在嵌套結(jié)構(gòu)中，不管父元素樣式的權(quán)重多大，在子元素定義的樣式都會(huì)覆蓋繼承來(lái)的樣式。

SS3 選擇器——基本選擇器

1、通配符（*）

通配符

<ul class="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>
.demo * {border:1px solid blue;}

2、元素選擇器（Element）

元素選擇器

<ul class="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>

li { background-color: grey; color: orange; }

元素選擇器，是css選擇器中最常見(jiàn)而且最基本的選擇器。元素選擇器其實(shí)就是文檔的元素，如html,body,p,div等等，比如這個(gè)demo：中元素包括了div,ul,li等。

3、類選擇器（.className）

類選擇器

<ul class="demo">
    <li>1</li>
    <li class="li-2">2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

.li-2 {font-weight: bold; color: yellow;}

上面代碼表示是給有 "li-2" 類名的元素加上一個(gè)“字體為粗體，顏色為黃色”的樣式。

4、id選擇器（#ID）

id選擇器

<ul class="demo">
    <li id="first">1</li>
    <li class="li-2">2</li>
    <li>3</li>
    <li>4</li>
    <li id="last">5</li>
</ul>

#first {background: lime;color: #000;}
#last {background: #000;color: lime;}
上面的代碼選擇了id為"first"和"last"的li。

5、后代選擇器（E F）

后代選擇器

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

ul li { background-color: red; color: #fff; }

元素的子元素或者是孫元素或者是更深層次的關(guān)系，都將被選中，換句話說(shuō)，不論li在ul中有多少層關(guān)系，都將被選中。注意他們之間需要一個(gè)空格隔開(kāi)

6、子元素選擇器(E>F)

子元素選擇器

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

ul > li {background: green;color: yellow;}

子元素選擇器只能選擇某元素的第一層子元素，其中ul為父元素，而li為子元素，其中ul>li所表示的是：選擇了ul元素下的所有第一層子元素li。簡(jiǎn)單的說(shuō)就是只選擇當(dāng)前第一層級(jí)的子元素

7、相鄰兄弟元素選擇器(E + F)

相鄰兄弟元素選擇器

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

li + li {background: green;color: yellow; border: 1px solid #ccc;}

相鄰兄弟選擇器可以選擇緊接在另一個(gè)元素后面的元素。

上面的 li+li，其中第二個(gè)li是第一個(gè)li的相鄰元素，第三個(gè)又是第二個(gè)相鄰元素，因此第三個(gè)也被選擇，依此類推，所以后面4個(gè)li都被選中了。

8、通用兄弟選擇器（E ? F）

通用兄弟選擇器

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}

選擇某元素后面的所有兄弟元素（選擇相鄰的所有兄弟元素），和相鄰選擇器類似（相鄰選擇器只選擇相鄰的一個(gè)元素）

選擇中了li.active 元素后面的所有兄弟元素li

9、群組選擇器

群組選擇器

<ul class="demo">
    <li  class="first">1</li>
    <li>2</li>
    <li  class="li-3">3</li>
    <li>4</li>
    <li class="last">5</li>
</ul>

.first,
.last,
.li-3 {background: green;color: yellow; border: 1px solid #ccc;}

群組選擇器是將具有相同樣式的元素分組在一起，每個(gè)選擇器之間使用逗號(hào)“，”隔開(kāi)

li.first和li.last和.li-3具有相同的樣式效果，所以我們把他們寫到一個(gè)組里

CSS3 選擇器——屬性選擇器

1、E[attr]：只使用屬性名，但沒(méi)有確定任何屬性值

屬性名選擇器

       <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[id] { background: blue; color:yellow; font-weight:bold; }

選擇了div.demo下所有帶有id屬性的a元素，并在這個(gè)元素上使用背景色為藍(lán)色，字體加粗并為黃色的樣式，

2、E[attr="value"]選擇指定的屬性對(duì)象

選擇指定的屬性對(duì)象

        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[id="first"] {background: blue; color:yellow; font-weight:bold; }

選擇了.demo a[id="first"] 選擇屬性id的值為first的對(duì)象。

3、E[attr~="value"] 包含屬性值

        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[title~="website"]{ background:orange; color:green; }

div.demo下的a元素的title屬性中，只要其屬性值中含有"website"這個(gè)詞就會(huì)被選擇

4、E[attr^="value"] 選擇attr屬性值以“value”開(kāi)頭的所有元素

        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[href^="http://"]{ background:orange; color:green; }
.demo a[href^="mailto:"]{ background:green; color:orange; }
選擇了以href屬性并且以"http://"和"mailto:"開(kāi)頭的所有a元素。

5、E[attr$="value"] 選擇attr屬性值以"value"結(jié)尾的所有元素


        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[href$="png"]{ background:orange; color:green; }
選擇div.demo中元素有href屬性，并以png值結(jié)尾的a元素。

6、E[attr*="value"] 選擇attr屬性值中包含子串"value"的所有元素。

        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[title*="site"]{ background:black; color:white; }
選擇了div.demo中a元素，而a元素的title屬性中只要有"site"就選中。

7、E[attr|="value"] 選擇attr屬性值等于value或以value-開(kāi)頭的所有元素

        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[lang|="zh"]{ background: gray; color: yellow; }

選擇了div.demo中l(wèi)ang屬性等于zh或以zh-開(kāi)頭的所有a元素。

CSS3 選擇器——偽類選擇器

1、:first-child 選擇某個(gè)元素的第一個(gè)子元素

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

.demo li:first-child { background: red; border: 1px solid yellow; color: #fff; }
選擇某個(gè)元素的第一個(gè)子元素。

2、:last-child 選擇某個(gè)元素的最后一個(gè)子元素

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

.demo li:last-child { background: red; border: 1px solid yellow; color: #fff; }
選擇某個(gè)元素的最后一個(gè)子元素。

3、:nth-child() 選擇某個(gè)的一個(gè)或多個(gè)特定的子元素

:nth-child(number);/*參數(shù)是具體數(shù)字*/
:nth-child(n);/*參數(shù)是n,n從0開(kāi)始計(jì)算*/
:nth-child(n*length)/*n的倍數(shù)選擇，n從0開(kāi)始算*/
:nth-child(n+length);/*選擇大于length后面的元素*/
:nth-child(-n+length)/*選擇小于length前面的元素*/
:nth-child(n*length+1);/*表示隔幾選一*/

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

:nth-child() 可以定義括號(hào)的值（值可以是整數(shù)，也可以是表達(dá)式）

.demo li:nth-child(3) { background: red; border: 1px solid yellow; color: #fff; }
選擇 div 元素下的第3個(gè) li 子元素。

[微風(fēng)][微風(fēng)]

:nth-child(n) /*參數(shù)是n,n從0開(kāi)始計(jì)算*/

.demo li:nth-child(n) { background: red; border: 1px solid yellow; color: #fff; }
等于.demo li {background: lime;}

n是一個(gè)簡(jiǎn)單的表達(dá)式，那么"n"取值是從“0”開(kāi)始計(jì)算。

?[微風(fēng)][微風(fēng)]

:nth-child(n*length)

.demo li:nth-child(2n) { background: red; border: 1px solid yellow; color: #fff; }
等于.demo li:nth-child(even) {}

選擇偶數(shù)的對(duì)象：n是一個(gè)簡(jiǎn)單的表達(dá)式，那么"n"取值是從“0”開(kāi)始計(jì)算。
表達(dá)示結(jié)果，如下:
.demo li:nth-child(2n) = (2*0) = 0
.demo li:nth-child(2n) = (2*1) = 2
.demo li:nth-child(2n) = (2*2) = 4
.demo li:nth-child(2n) = (2*3) = 6
以此類推....

?[微風(fēng)][微風(fēng)]

.demo li:nth-child(2n-1) { background: red; border: 1px solid yellow; color: #fff; }
等于.demo li:nth-child(odd) {}

選擇奇數(shù)的對(duì)象：n是一個(gè)簡(jiǎn)單的表達(dá)式，那么"n"取值是從“0”開(kāi)始計(jì)算。
表達(dá)示結(jié)果，如下:
.demo li:nth-child(2n-1) = (2*0-1) = -1
.demo li:nth-child(2n-1) = (2*1-1) = 1
.demo li:nth-child(2n-1) = (2*2-1) = 3
.demo li:nth-child(2n-1) = (2*3-1) = 5
以此類推....

?[微風(fēng)][微風(fēng)]

:nth-child(n+length); /*選擇大于length后面的元素*/

nth-child(n+5)從第五個(gè)元素開(kāi)始選擇，這里的數(shù)字你可以自己定義
.demo li:nth-child(n+5){ background: red; border: 1px solid yellow; color: #fff; }

n是一個(gè)簡(jiǎn)單的表達(dá)式，那么"n"取值是從“0”開(kāi)始計(jì)算。

表達(dá)示結(jié)果，如下:
.demo li:nth-child(0+5) = 5
.demo li:nth-child(1+5) = 6
.demo li:nth-child(2+5) = 7
.demo li:nth-child(3+5) = 8
以此類推....

?[微風(fēng)][微風(fēng)]

nth-child(-n+5)反向從第五個(gè)元素開(kāi)始選擇，這里的數(shù)字你可以自己定義

.demo li:nth-child(-n+5){ background: red; border: 1px solid yellow; color: #fff; }

n是一個(gè)簡(jiǎn)單的表達(dá)式，那么"n"取值是從“0”開(kāi)始計(jì)算。

表達(dá)示結(jié)果，如下:
.demo li:nth-child(-0+5) = 5
.demo li:nth-child(-1+5) = 4
.demo li:nth-child(-2+5) = 3
.demo li:nth-child(-3+5) = 2
以此類推....

?[微風(fēng)][微風(fēng)]

:nth-child(n*length+1); /*表示隔幾選一*/

:nth-child(4n+1)間隔選擇對(duì)象，數(shù)字可自定義

.demo li:nth-child(4n+1) { background: red; border: 1px solid yellow; color: #fff; }

n是一個(gè)簡(jiǎn)單的表達(dá)式，那么"n"取值是從“0”開(kāi)始計(jì)算。

表達(dá)示結(jié)果，如下:
.demo li:nth-child(4*0+1) = 1
.demo li:nth-child(4*1+1) = 5
.demo li:nth-child(4*2+1) = 9
.demo li:nth-child(4*3+1) = 13
以此類推....

4、:nth-last-child() 選擇指定的元素，從最后一個(gè)開(kāi)始

.demo li:nth-last-child(4) { background: red; border: 1px solid yellow; color: #fff; }
選擇倒數(shù)第四個(gè)元素。

?[微風(fēng)][微風(fēng)]

可以用表達(dá)示，選擇奇數(shù)

.demo li:nth-last-child(2n) { background: red; border: 1px solid yellow; color: #fff; }

n是一個(gè)簡(jiǎn)單的表達(dá)式，那么"n"取值是從“0”開(kāi)始計(jì)算。

表達(dá)示結(jié)果，如下:
:nth-last-child(2*1) = 2
:nth-last-child(2*2) = 4
:nth-last-child(2*3) = 6
:nth-last-child(2*4) = 8
以此類推....

?[微風(fēng)][微風(fēng)]

可以用表達(dá)示，選擇偶數(shù)

.demo li:nth-last-child(2n-1) { background: red; border: 1px solid yellow; color: #fff; }

n是一個(gè)簡(jiǎn)單的表達(dá)式，那么"n"取值是從“0”開(kāi)始計(jì)算。

表達(dá)示結(jié)果，如下:
:nth-last-child(2*1-1) = 1
:nth-last-child(2*2-1) = 3
:nth-last-child(2*3-1) = 5
:nth-last-child(2*4-1) = 7
:nth-last-child(2*5-1) = 9

5、:nth-of-type 選擇指定的類型元素

.demo li:nth-of-type(8) { background: red; border: 1px solid yellow; color: #fff; }
指定獲取類型為 li 的第8個(gè)元素，中間間隔了a元素

?[微風(fēng)][微風(fēng)]

與 :nth-child區(qū)別，:nth-child不指定類型 .demo li:nth-child(8) { background: red; border: 1px solid yellow; color: #fff; }

指定獲取元素為li第8個(gè)元素，中間間隔了a元素，因沒(méi)有指定類型，而第8個(gè)元素是a，所以無(wú)法設(shè)置樣式

6、:nth-last-of-type() 選擇指定類型的元素，從元素的最后一個(gè)開(kāi)始計(jì)算

.demo li:nth-last-of-type(2) { background: red; border: 1px solid yellow; color: #fff; }

數(shù)字可使用n表達(dá)式計(jì)算，從最后一個(gè)元素開(kāi)始計(jì)算，獲取指定類型為 li 的第2個(gè)元素，

7、:first-of-type 選擇指定類型的第一個(gè)元素；

.demo li:first-of-type { background: red; border: 1px solid yellow; color: #fff; }

:first-of-type與:first-child類型，前者區(qū)別了類型，后者無(wú)區(qū)域

獲取第一個(gè)為 li 的元素，子元素中包含了a、li兩種元素

8、:last-of-type 選擇指定類型的最后一個(gè)元素；

.demo li:last-of-type { background: red; border: 1px solid yellow; color: #fff; }

:last-of-type與:last-child類型，前者區(qū)分了類型，后者無(wú)區(qū)分

獲取最后一個(gè)為 li 的元素，子元素中包含了a、li兩種元素

9、:only-child 選擇的元素是它的父元素的唯一一個(gè)了元素；

        <div>
            <p>我是子級(jí)，在父級(jí)中是唯一一個(gè)子元素。</p>
        </div>

        <div>
            <span>我是span標(biāo)簽，在父級(jí)中并不是唯一的子元素，因?yàn)檫€有一個(gè)p標(biāo)簽。</span>
            <p>我是p標(biāo)簽，在父級(jí)中并不是唯一的子元素，因?yàn)檫€有一個(gè)span標(biāo)簽。</p>
        </div>

        <p>
            我是p標(biāo)簽，而我并沒(méi)有父級(jí)。
        </p>

p:only-child { background: #ff0000; }

我是子級(jí)，在父級(jí)中是唯一一個(gè)子元素。
我是span標(biāo)簽，在父級(jí)中并不是唯一的子元素，因?yàn)檫€有一個(gè)p標(biāo)簽。
我是p標(biāo)簽，在父級(jí)中并不是唯一的子元素，因?yàn)檫€有一個(gè)span標(biāo)簽。
我是p標(biāo)簽，而我并沒(méi)有父級(jí)。

10、:only-of-type 選擇一個(gè)元素是它的上級(jí)元素的唯一一個(gè)相同類型的子元素；

        <div>
            <p>我是子級(jí)p元素，在父級(jí)中是唯一的一個(gè)p元素。所以會(huì)被選擇中。</p>
            <span>我是子級(jí)span元素，在父級(jí)中并不是唯一的span元素。</span>
            <span>我是子級(jí)span元素，在父級(jí)中并不是唯一的span元素。</span>
            <span>我是子級(jí)span元素，在父級(jí)中并不是唯一的span元素。</span>
        </div>
        <div>
            <p>我是p標(biāo)簽，在父級(jí)中并不是唯一的p元素，因?yàn)檫€有一個(gè)和我相同的p元素。所以不會(huì)被選中。</p>
            <p>我是p標(biāo)簽，在父級(jí)中并不是唯一的p元素，因?yàn)檫€有一個(gè)和我相同的p元素。所以不會(huì)被選中。</p>
        </div>

p:only-of-type { background:#ff0000; }

我是子級(jí)p元素，在父級(jí)中是唯一的一個(gè)p元素。所以會(huì)被選擇中。

我是子級(jí)span元素，在父級(jí)中并不是唯一的span元素。我是子級(jí)span元素，在父級(jí)中并不是唯一的span元素。我是子級(jí)span元素，在父級(jí)中并不是唯一的span元素。

我是p標(biāo)簽，在父級(jí)中并不是唯一的p元素，因?yàn)檫€有一個(gè)和我相同的p元素。所以不會(huì)被選中。
我是p標(biāo)簽，在父級(jí)中并不是唯一的p元素，因?yàn)檫€有一個(gè)和我相同的p元素。所以不會(huì)被選中。

11、:empty 選擇的元素里面沒(méi)有任何內(nèi)容。

        <p>我是一個(gè)p標(biāo)簽，我<span style="color: red;">下面</span>有個(gè)p標(biāo)簽，內(nèi)容是空的，所以它會(huì)被選中。</p>
        <p></p>
        <p>我是一個(gè)p標(biāo)簽，我<span style="color: red;">上面</span>有個(gè)p標(biāo)簽，內(nèi)容是空的，所以它會(huì)被選中。</p>
        <p>我是一個(gè)p標(biāo)簽。</p>
        <p>我是一個(gè)p標(biāo)簽。</p>

p:empty { background:#ff0000; }

第2行的p標(biāo)簽會(huì)被選中，因?yàn)樗鼪](méi)有內(nèi)容。

在線咨詢

上一篇：前端教程：JavaScript中如何操作元素內(nèi)容？
下一篇：「Web前端開(kāi)發(fā)」-16-CSS浮動(dòng)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

一文快速讀懂CSS屬性選擇器

CSS Selector類型劃分

基本常用選擇器

屬性選擇器

您的項(xiàng)目需求