CSS是前端重要的組成部分，它能幫助我們通過(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)中元素名稱(chēng)直接作為選擇符。

實(shí)例：

div{

width: 100px;

height: 100px;

}

類(lèi)（class）選擇器

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

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

實(shí)例：

h1 class="title"標(biāo)題1/h1

展開(kāi)全文

h2 class="title"標(biāo)題2/h2

.title {

color: red;

}

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

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

id選擇器

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

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

實(shí)例：

div id="box"/div

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

#box {

width: 100px;

height: 100px;

background-color: pink;

}

注意：起id名時(shí)不能用關(guān)鍵字（所有標(biāo)簽和屬性都是關(guān)鍵字），并且一個(gè)id名稱(chēng)只能對(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 class="box"

h2標(biāo)題1/h2

p段落1/p

p段落2/p

/div

.box p {

color: red;

}

子代選擇器

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

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

實(shí)例：

div class="box"

h2標(biāo)題1/h2

div

h2標(biāo)題2/h2

/div

/div

.box h2 {

color: red;

}

全部兄弟選擇器

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

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

實(shí)例：

div class="box"

h2標(biāo)題1/h2

p段落/p

h2標(biāo)題2/h2

h2標(biāo)題3/h2

/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)：

p,

h2 {

color: red;

}

交集選擇器

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

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

實(shí)例：

h2 class="title"標(biāo)題1/h2

h2標(biāo)題2/h2

h2.title {

color: red;

}

二、屬性選擇器

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

屬性的或運(yùn)算

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

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

實(shí)例：

h2 class="title" name標(biāo)題1/h2

h2標(biāo)題2/h2

.title[name] {

color: red;

}

屬性的與運(yùn)算

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

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

實(shí)例：

h2 class="title" name標(biāo)題1/h2

h2 name標(biāo)題2/h2

h2[name][class] {

color: red;

}

屬性值的篩選

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

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

實(shí)例：

h2 class="title" name標(biāo)題1/h2

h2 class="title2" name標(biāo)題2/h2

h2[class='title'] {

color: red;

}

前綴篩選^

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

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

實(shí)例：

h2 class="title"標(biāo)題1/h2

h2 class="title2"標(biāo)題2/h2

h2 class="stitle"標(biāo)題3/h2

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"標(biāo)題1/h2

h2 class="xx title xx"標(biāo)題2/h2

h2 class="stitle"標(biāo)題3/h2

h2[class~='title'] {

color: red;

}

包含限定|

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

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

實(shí)例：

h2 class="title"標(biāo)題1/h2

h2 class="title-xx"標(biāo)題2/h2

h2 class="title.xx"標(biāo)題3/h2

h2 class="xx-title"標(biāo)題4/h2

h2[class|='title'] {

color: red;

}

三、偽類(lèi)選擇器:

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

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

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

說(shuō)明：前4個(gè)超鏈接偽類(lèi)選擇器聯(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)偽類(lèi)選擇器

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

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

3.3 其他偽類(lèi)選擇器

四、偽元素選擇器::

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

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

五、選擇器權(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選擇器=偽類(lèi)選擇器=屬性選擇器標(biāo)簽選擇器=偽元素選擇器通配符選擇器繼承樣式。

總結(jié)

以上就是為大家總結(jié)的CSS選擇器的種類(lèi)及功能?？偟膩?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)的樣式。