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

一、初級選擇器

1.1 基礎選擇器

通配符（*）選擇器

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

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

實例：

*{

margin: 0;

padding: 0;

}

標簽（元素）選擇器

語法：標簽名{屬性：屬性值；}

說明：標簽選擇器就是使用結構中元素名稱直接作為選擇符。

實例：

div{

width: 100px;

height: 100px;

}

類（class）選擇器

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

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

實例：

h1 class="title"標題1/h1

展開全文

h2 class="title"標題2/h2

.title {

color: red;

}

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

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

id選擇器

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

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

實例：

div id="box"/div

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

#box {

width: 100px;

height: 100px;

background-color: pink;

}

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

1.2 結構選擇器

后代（包含）選擇器

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

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

實例：

div class="box"

h2標題1/h2

p段落1/p

p段落2/p

/div

.box p {

color: red;

}

子代選擇器

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

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

實例：

div class="box"

h2標題1/h2

div

h2標題2/h2

/div

/div

.box h2 {

color: red;

}

全部兄弟選擇器

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

說明：選擇當前元素所有符合條件的兄弟元素。

實例：

div class="box"

h2標題1/h2

p段落/p

h2標題2/h2

h2標題3/h2

/div

p ~ h2 {

color: red;

}

注意：只能選中當前元素后面的元素。

相鄰兄弟選擇器

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

說明：選中當前元素緊挨著的后面的兄弟元素。

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

p + h2 {

color: red;

}

注意：只能選中當前元素后面的元素，如果沒有緊挨著當前元素就不會產生效果。

并集（群組）選擇器

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

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

實例：這里我們依然用上述的結構：

p,

h2 {

color: red;

}

交集選擇器

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

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

實例：

h2 class="title"標題1/h2

h2標題2/h2

h2.title {

color: red;

}

二、屬性選擇器

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

屬性的或運算

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

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

實例：

h2 class="title" name標題1/h2

h2標題2/h2

.title[name] {

color: red;

}

屬性的與運算

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

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

實例：

h2 class="title" name標題1/h2

h2 name標題2/h2

h2[name][class] {

color: red;

}

屬性值的篩選

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

說明：選擇對應的屬性值符合要求的元素。

實例：

h2 class="title" name標題1/h2

h2 class="title2" name標題2/h2

h2[class='title'] {

color: red;

}

前綴篩選^

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

說明：選擇屬性值以當前要求開頭的元素。

實例：

h2 class="title"標題1/h2

h2 class="title2"標題2/h2

h2 class="stitle"標題3/h2

h2[class^='tit'] {

color: red;

}

后綴篩選$

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

說明：選擇屬性值以當前要求結尾的元素。

實例：這里我們使用上述的結構：

h2[class$='tle'] {

color: red;

}

包含限定*

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

說明：選擇屬性值包含當前要求的元素。

實例：這里我們使用上述的結構：

h2[class*='title'] {

color: red;

}

包含限定~

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

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

實例：

h2 class="title"標題1/h2

h2 class="xx title xx"標題2/h2

h2 class="stitle"標題3/h2

h2[class~='title'] {

color: red;

}

包含限定|

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

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

實例：

h2 class="title"標題1/h2

h2 class="title-xx"標題2/h2

h2 class="title.xx"標題3/h2

h2 class="xx-title"標題4/h2

h2[class|='title'] {

color: red;

}

三、偽類選擇器:

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

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

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

說明：前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;} /*鼠標滑過鏈接狀態(tài)*/

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

3.2 結構偽類選擇器

結構偽類指利用頁面的布局結構選擇響應的元素。

注意：結構偽類選擇器中，子元素的序號是從1開始的，所以，當參數n的計算結果為0 時，將不選擇任何元素。

3.3 其他偽類選擇器

四、偽元素選擇器::

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

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

五、選擇器權重

在CSS中我們用四位數字表示選擇器的權重，方便我們去判斷樣式的優(yōu)先級。

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

!important代表權重最高（最終的樣式）。

background-color：skyblue!important;

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

!important行內樣式id選擇器class選擇器=偽類選擇器=屬性選擇器標簽選擇器=偽元素選擇器通配符選擇器繼承樣式。

總結

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

當不同選擇器的樣式設置有沖突時，高權重選擇器的樣式會覆蓋低權重選擇器的樣式。

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

需要注意，CSS具有繼承性，即子標簽會繼承父標簽的某些樣式。但是繼承樣式沒有權重。所以在嵌套結構中，不管父元素樣式的權重多大，在子元素定義的樣式都會覆蓋繼承來的樣式。