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

一、初級選擇器

1.1 基礎(chǔ)選擇器

通配符（*）選擇器

語法：*{屬性：屬性值；}

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

實例：

*{

margin: 0;

padding: 0;

}

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

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

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

實例：

div{

width: 100px;

height: 100px;

}

類（class）選擇器

語法：.class名{屬性：屬性值；}

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

實例：

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

展開全文

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

.title {

color: red;

}

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

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

id選擇器

語法：#id名{屬性：屬性值；}

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

實例：

div id="box"/div

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

#box {

width: 100px;

height: 100px;

background-color: pink;

}

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

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

后代（包含）選擇器

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

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

實例：

div class="box"

h2標(biāo)題1/h2

p段落1/p

p段落2/p

/div

.box p {

color: red;

}

子代選擇器

語法：選擇器1選擇器2{屬性：屬性值；}

說明：用來選擇緊挨著選擇器1（父元素）的第一層符合選擇器2的子元素。

實例：

div class="box"

h2標(biāo)題1/h2

div

h2標(biāo)題2/h2

/div

/div

.box h2 {

color: red;

}

全部兄弟選擇器

語法：選擇器1~選擇器2{屬性：屬性值；}

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

實例：

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)前元素后面的元素。

相鄰兄弟選擇器

語法：選擇器1+選擇器2{屬性：屬性值；}

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

實例：上面的案例修改成：

p + h2 {

color: red;

}

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

并集（群組）選擇器

語法：選擇器1，選擇器2{屬性：屬性值；}

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

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

p,

h2 {

color: red;

}

交集選擇器

語法：選擇器1選擇器2{屬性：屬性值；}

說明：用于選擇同時符合選擇器1和選擇器2條件的元素。

實例：

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

h2標(biāo)題2/h2

h2.title {

color: red;

}

二、屬性選擇器

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

屬性的或運算

語法：選擇器[屬性名]{屬性：屬性值；}

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

實例：

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

h2標(biāo)題2/h2

.title[name] {

color: red;

}

屬性的與運算

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

說明：選擇同時包含屬性1和屬性2的元素。

實例：

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

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

h2[name][class] {

color: red;

}

屬性值的篩選

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

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

實例：

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

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

h2[class='title'] {

color: red;

}

前綴篩選^

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

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

實例：

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;

}

后綴篩選$

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

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

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

h2[class$='tle'] {

color: red;

}

包含限定*

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

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

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

h2[class*='title'] {

color: red;

}

包含限定~

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

說明：選擇屬性值包含一個給定要求詞（單獨存在）的元素。

實例：

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;

}

包含限定|

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

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

實例：

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;

}

三、偽類選擇器:

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

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

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

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

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

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

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

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

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

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

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

3.3 其他偽類選擇器

四、偽元素選擇器::

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

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

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

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

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

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

background-color：skyblue!important;

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

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

總結(jié)

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

當(dāng)不同選擇器的樣式設(shè)置有沖突時，高權(quán)重選擇器的樣式會覆蓋低權(quán)重選擇器的樣式。

相同權(quán)重的選擇器，樣式遵循就近原則。哪個選擇器樣式最后定義，就會采用哪個樣式。

需要注意，CSS具有繼承性，即子標(biāo)簽會繼承父標(biāo)簽的某些樣式。但是繼承樣式?jīng)]有權(quán)重。所以在嵌套結(jié)構(gòu)中，不管父元素樣式的權(quán)重多大，在子元素定義的樣式都會覆蓋繼承來的樣式。