css選擇器優先順序是什麼？ css基本選擇器優先權的介紹

css的選擇器有很多種，那麼，自然而然的就會有優先權這一概念出現，所以，css選擇器優先順序是怎麼樣的呢？這篇文章將來跟大家介紹css選擇器優先權的排序，話不多說，我們會直接看正文內容。

在看css選擇器優先權順序前，我們先來簡單說說css基本選擇器有哪些？

1、標記選擇器（如：body,div,p,ul,li）

2、id選擇器（如：id="name",id="name_txt"）

3、類別選擇器（如：id="name",id="name_txt"）

#4、後代選擇器（如：#head .nav ul li 從父集到子孫集的選擇器）

5、子元素選擇器（如：div>p ,帶大於號>）

6、偽類選擇器（如：就是連結樣式, a元素的偽類，4種不同的狀態：link、visited、active、hover。）

看完了基本的css選擇器類型後，我們接著來看css優先權的概念。

當兩個規則都作用到了同一個html元素上時，如果定義的屬性有衝突，那麼應該用誰的值的，用到誰的值誰的優先權就高。

我們來看看css選擇器優先權的演算法：

每個規則對應一個初始"四位數"：0、0、0、0
若是行內選擇符，則加1、0、0、0
若是ID選擇符，則加0、1、0、0
若是類別選擇符/偽類選擇符，則分別加0 、0、1、0
若是元素選擇符，則分別加0、0、0、1
演算法：將每條規則中，選擇符對應的數相加後得到的」四位數“ ，從左到右進行比較，大的優先權越高。　　

看完了上述內容，那我們就來看看css選擇器優先權的具體排序。

css選擇器優先權最高到最低順序為：

1.id選擇器（#myid）

#2.類選擇器（.myclassname）

3.標籤選擇器（div,h1,p）

4.子選擇器（ul

5.後代選擇器（li a）

6.偽類別選擇（a:hover,li:nth-child）

最後，需要注意的是：　　

!important的優先級是最高的，但出現衝突時則需比較」四位數「;
優先級相同時，則採用就近原則，選擇最後出現的樣式;
繼承得來的屬性，其優先級最低。

以上就是本篇文章的全部內容，關於css選擇器當然不只上述的六個選擇器，更多css選擇器的內容可以參考css使用手冊。

以上是css選擇器優先順序是什麼？ css基本選擇器優先權的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！