CSS樣式優先順序

給dom元素設定樣式，通常通過以下幾種方式：

// html

test
// css
#test p 
div p 

最終會顯示紫色。

其中的規則是這樣的

1）型別選擇器（type selectors）（例如, h1）和 偽元素（pseudo-elements）（例如, ::before）權重1

2）類選擇器（class selectors） (例如,.example)，屬性選擇器（attributes selectors）（例如, [type=「radio」]），偽類（pseudo-classes）（例如, :hover）

權重10

3）id選擇器（例如, #example）權重100

4) 內聯樣式權重1000

優先順序依次遞增，權重的計算與出現的先後順序無關，同等權重的後出現的覆蓋先出現的

通配選擇符（universal selector）(*), 關係選擇符（combinators） (+, >, ~, 』 ') 和 否定偽類（negation pseudo-class）(:not()) 對優先順序沒有影響。（但是，在 :not() 內部宣告的選擇器是會影響優先順序）。

除了上述宣告的還有一些特別的規則：

1）樣式樹的距離

// html

// css
body h1 
html h1 

// html

// css
#parent 
h1 

1） 實現相同的樣式樹，放在後面

2）！important

3）使用更高的優先順序

總結起來，如下圖所示，

mdncss

css-ch

css樣式優先順序

多重樣式將層疊為乙個 樣式表允許以多種方式規定樣式資訊。樣式可以規定在單個的 html 元素中，在 html 頁的頭元素中，或在乙個外部的 css 檔案中。甚至可以在同乙個 html 文件內部引用多個外部樣式表。層疊次序 當同乙個 html 元素被不止乙個樣式定義時，會使用哪個樣式呢？一般而言，所有...

CSS樣式優先順序

css樣式分為內聯樣式和外部樣式，一般情況下 內聯樣式的優先順序大於外部樣式。即style樣式 id選擇器 class選擇器 元素選擇器。例如 on person num li當對li標籤新增上面兩個樣式時，on樣式中重複的內容是不會生效的。因為.on樣式的優先順序值小於li，它會被li樣式覆蓋。但...

css樣式優先順序

css樣式分類 外聯樣式，內部樣式，內聯樣式，行內樣式 標籤屬性 優先順序 行內樣式 標籤屬性 外聯樣式 內部樣式 內聯樣式，這裡的高度為110px class login class imgs 選擇器 權值內聯樣式表的權值最高 1000 id 選擇器的權值 100class 類選擇器的權值 10h...