css權重

css權重

CSS層疊性

在講css權重以前須要理解的是css的層疊性。css具備繼承性，層疊性。下面是對層疊性的簡單理解：

1）同一個HTML標籤，能夠被多個選擇器選中，而且能夠被共同做用獲得最終的樣式 2）css處理衝突的能力，相同做用的樣式經過權重來決定，並且不存在任何兼容性問題

什麼是css權重

若對同一個元素定義不一樣的樣式，瀏覽器會根據樣式規則的權重來決定到底對該元素運用哪一條樣式，權重值高的css規則生效。若對樣式規則的權重不夠理解，常常會出現明明寫好的樣式死活就是不起做用的狀況。

下面介紹樣式規則的權重是怎麼計算的

• 一個id選擇器的權重是100
• 一個class選擇器，屬性選擇器，僞類選擇器（：hover等）的權重是10
• 一個標籤選擇器，僞元素選擇器（：：before等）權重是1
• 內聯樣式的權重比全部選擇器的都要大
• ！important的權重是額外特指的，加給誰誰就特別大

注意：
1）！important提高的只是一個屬性而不是一個選擇器，正確的寫法是：
p{
	color:red!important;//分號寫在最外面，添加在那個屬性上就提高哪一個屬性的權重
    font-size:16px;//沒有加!important,全部不會提高權重
}

2） !important沒法提高繼承的權重，該是0仍是0
HTML結構
<div>
	<p>垃圾分類</p>
</div>

css樣式
div{
	color:red !important;
}
p{
	color:blue;//直接被選中顯示藍色
}

3)!important不影響就近原則
HTML結構
<div>
	<ul>
		<li>垃圾分類</li>
	</ul>
</div>

css樣式
div{
	color:red !important;
}
ul{
	color:blue;//都沒有被直接選中的狀況下，ul描述的更近,顯示藍色
}

4）建議少用!important
複製代碼

等級關係

行內樣式>ID選擇器 > 類選擇器 | 屬性選擇器 | 僞類選擇器 > 元素選擇器
複製代碼

如何判斷瀏覽器會選擇哪個樣式？

注意：

• 誰在後面聽誰：按照代碼的從上到下的解析順序，排在最後面的被選中，原理爲樣式的層疊替代原則

HTML結構
<div class='box1'>
	<ul class='box2'>
		<li>垃圾分類</li>
	</ul>
</div>

css樣式
#box1 li{
	color:red;//直接選中權重相同
}
#box2 li{
	color:blue;//直接選中權重相同，按照代碼順序，本條規則在在上一條權重同樣的規則下面，顯示藍色
}
複製代碼

• 就近原則，誰描述的近聽誰指的是：選擇器選擇到的深度越靠近那個元素就被選中

HTML結構
<div>
	<ul>
		<li>垃圾分類</li>
	</ul>
</div>

css樣式
div{
	color:red;//都沒有被直接選中的狀況下,div是ul的外層，深度比不上ul
}
ul{
	color:blue;//都沒有被直接選中的狀況下，ul描述的更近,顯示藍色
}
複製代碼