1、類別選擇器

類別選擇器根據(jù)類名來(lái)選擇，前面以“.”來(lái)標(biāo)志。

在HTML中，元素可以定義一個(gè)class的屬性，并且多個(gè)元素都可以重復(fù)應(yīng)用這個(gè)屬性。

2、標(biāo)簽選擇器

一個(gè)完整的HTML頁(yè)面是有很多不同的標(biāo)簽組成，如：body，div，p，ul，li，而標(biāo)簽選擇器，則是 決定哪些標(biāo)簽采用相應(yīng)的css樣式。

3、ID選擇器

ID選擇器可以為標(biāo)有特定ID的HTML元素制定特定的樣式。根據(jù)元素ID來(lái)選擇元素，具有唯一性，這意味著同一ID在同一文檔頁(yè)面中只能出現(xiàn)一次。例如，你將一個(gè)元素的id取值為“name”，那么在同一頁(yè)面你就不能再將其他元素id取名為“name”了。

前面以“#”號(hào)來(lái)標(biāo)志，在樣式里面可以這樣定義

4、通用選擇器

用過(guò)“*”號(hào)來(lái)表示。如下代碼表示所有元素的內(nèi)外邊距都為0，所有的字體都為微軟雅黑。他可以清除不同瀏覽器的默認(rèn)樣式。

同時(shí)通用選擇器還可以和后代選擇器組合。如下表示所有p元素后代的所有元素都應(yīng)用這個(gè)樣式。

注意：但是如果你在p標(biāo)簽里嵌套了一個(gè)p標(biāo)簽，就會(huì)出現(xiàn)瀏覽器不能解析的情況，因此要避免這種情況發(fā)生。.

5、后代選擇器

后代選擇器也稱為包含選擇汽車，用來(lái)選擇特定元素或元素組的后代，將對(duì)父元素的選擇放在前面，對(duì)子元素的選擇放在后面，中間加一個(gè)空格分開(kāi)。后代選擇器中的元素不僅僅只能有兩個(gè)，對(duì)于多層子線后代關(guān)系，可以有多個(gè)空格加以分開(kāi)。

如下例子定義了所有class屬性為father的元素下面的class屬性為child的顏色為紅色。

6、子選擇器

請(qǐng)注意這個(gè)選擇器與后代選擇器的區(qū)別，子選擇器只是選擇元素的直接后代，即僅僅作用于第一個(gè)后代。后代選擇器通過(guò)空格來(lái)進(jìn)行選擇，而子選擇器是通過(guò)“>”進(jìn)行選擇

7、偽類選擇器

即鏈接樣式。a元素的偽類，存在4中不同的狀態(tài)：link、visited、active、hover。

8、群組選擇器

具有相同樣式的標(biāo)簽分組顯示，將具有多個(gè)相同屬性的元素，合并群組進(jìn)行選擇，定義同樣的css屬性，這大大的提高了編碼效率，同時(shí)也減少了css文件的體積。

9、相鄰?fù)x擇器

如一個(gè)標(biāo)題h1元素后面緊跟了兩個(gè)段落p元素，我們想定位第一個(gè)段落p元素，對(duì)它應(yīng)用樣式，就可以使用相鄰?fù)x擇器。兩個(gè)元素之間用“+”進(jìn)行連接。

問(wèn)題一：如果是十一個(gè)class選擇器和一個(gè)ID選擇器，系統(tǒng)會(huì)以哪個(gè)優(yōu)先？

解答：十一個(gè)class的選擇器和一個(gè)ID選擇器系統(tǒng)會(huì)以ID選擇器優(yōu)先

問(wèn)題二：對(duì)多個(gè)選擇器使用的優(yōu)先級(jí)是怎么進(jìn)行計(jì)算的？

解答：對(duì)于不同類別的選擇器，以以下原則進(jìn)行排序：

1、在屬性后面使用！important會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式。

2、作為style屬性寫(xiě)在元素內(nèi)的樣式

3、id選擇器

4、類選擇器

5、標(biāo)簽選擇器

6、通配符選擇器

7、瀏覽器自定義或子元素集成父類的樣式

將上面的稍微總結(jié)一下就是：

！important>行內(nèi)樣式>ID選擇器>類選擇器>標(biāo)簽>通配符>繼承>瀏覽器默認(rèn)屬性

同一級(jí)別中后寫(xiě)的會(huì)覆蓋先寫(xiě)的樣式。

問(wèn)題三：子選擇器和后代選擇器的區(qū)別？

解答：這個(gè)在前面有講到，子選擇器只是選擇元素的直接后代，即僅僅作用于第一個(gè)后代，后代選擇器則可作用于孫子代、曾孫子代。后代選擇器通過(guò)空格來(lái)進(jìn)行選擇，而子選擇器是通過(guò)“>”進(jìn)行選擇。