CSS選擇器優先順序（特異性）

1、行內樣式

（!important）

#id

.title, input[type="text"], :hover

div, ::before

(0, 0, 0, 0)

(行內樣式，id選擇器，class/屬性/偽類選擇器/，型別/偽元素)

"container"

>
class
="menu"
>
"item1"
class
="item1"
>
專案1li
>
class
="item2"
>
專案1li
>
class
="item3"
>
專案1li
>
ul>
div>
>
/* (0, 1, 3, 1) */
#container .menu.menu li.item2
/* (0, 1, 2, 1) */
#container li:nth-child(2).item2
/* (0, 1, 1, 1) */
#container li.item2
/* (0, 0, 1, 1) */
li.item2
/* (0, 0, 1, 0) */
.item2
style
>

css選擇器特異性計算

翻譯自w3c 中的一段 是關於css選擇器優先順序的 計算乙個選擇器的特異性 選擇器的特異性計算如下 1.計算選擇器中id選擇器的數量 a 2.計算選擇器中class選擇器，屬性選擇器和偽類選擇器的數量 b 3.計算型別選擇器和偽元素選擇器的數量 c 4.忽視通用選擇器 連線三個數字a b c就是特...

選擇器優先順序 CSS選擇器優先順序總結

css選擇器優先順序這個問題，相信有點經驗前端都會認為非常簡單，但是我們今天還是來總結一下吧。相信大家應該很少直接在html頁面寫樣式吧，一般都是用link標籤匯入css樣式表。使用者自定義樣式表就是我們用link標籤引入的css樣式表，為了保持不同瀏覽器下樣式相同，所以我們的自定義樣式表一般都會覆...

CSS 選擇器優先順序

css優先順序包含四個級別 文內選擇器，id選擇器，class選擇器，元素選擇器 以及各級別出現的次數。根據這四個級別出現的次數計算得到css的優先順序。css優先順序的計算規則如下 頁面中直接設定style,加1,0,0,0 每個id選擇器 如 id 加0,1,0,0 每個class選擇器 如 c...