CSS樣式的優先順序問題

2021-07-25 08:29:55 字數 682 閱讀 2615

1、相同權值情況下,css樣式的優先順序總結來說,就是——就近原則(離被設定元素越近優先級別越高):

內聯樣式表(標籤內部)> 嵌入樣式表(當前檔案中)> 外部樣式表(外部檔案中)。

2、權值不同時,瀏覽器是根據權值來判斷使用哪種css樣式的,哪種樣式權值高就使用哪種樣式。

下面是權值的規則:

標籤的權值為1,類選擇符的權值為10,id選擇符的權值最高為100。

p

/*標籤,權值為1*/

pspan

/*兩個標籤,權值為1+1=2*/

p>span

/*權值與上面的相同,因此採取就近原則*/

.warning

/*類選擇符,權值為10*/

pspan

.warning

/*權值為1+1+10=12*/

#footer

.note

p /*權值為100+10+1=111*/

注意:(1)還有乙個權值比較特殊——繼承也有權值但很低,有的文獻提出它只有0.1,所以可以理解為繼承的權值最低。(繼承是一種規則,它允許樣式不僅應用於某個特定html標籤元素,而且應用於其後代。如便簽內部的標籤就會繼承該標籤的樣式);

(2)在某些特殊的情況下,!important會為某些樣式設定具有最高權值。

Css樣式優先順序問題

想要對乙個標籤處理它的樣式,可以用 class 的方式來定義它的類,然後在類中處理他的樣式 例如 html view plain copy print?style box style divclass box div 當然也可以用 id 或者乾脆直接對標籤寫樣式,然而如果把這些定義都放在了乙個元素中...

css樣式優先順序問題

官方表述的css樣式優先順序如下 通用選擇器 元素 型別 選擇器 類選擇器 屬性選擇器 偽類 id 選擇器 內聯樣式 css 偽類用於向某些選擇器新增特殊的效果屬性選擇器可以根據元素的屬性及屬性值來選擇元素。那麼,我們來舉個例子 html 引入乙個style.css樣式 在style.css樣式中寫...

css樣式優先順序問題

官方表述的css樣式優先順序如下 通用選擇器 元素 型別 選擇器 類選擇器 屬性選擇器 偽類 id 選擇器 內聯樣式 css 偽類用於向某些選擇器新增特殊的效果 屬性選擇器可以根據元素的屬性及屬性值來選擇元素。那麼,我們來舉個例子 html 引入乙個style.css樣式 在style.css樣式中...