css 權重

前言

做爲一個web端工程師，不可避免的會用到css，知道css的權重原則能夠幫助咱們更好更快的去理解css。

權重列表

類型	權重	eg：
html 標籤	1	p(標籤){}
class	10	.test{}
id	100	#test{}

組合類型

類型	權重	eg：
組合標籤	1 + 1	div em{}
標籤和class	10 + 1	div.test{}
標籤和class	100 + 10	#test .red{}

tips: 選擇符權重相同的狀況下，樣式會遵循就近原則，哪一個選擇符最後定義，就採用哪一個選擇符的樣式。

結論

css 選擇符的權重越高，樣式就越不容易被覆蓋，越容易對其餘選擇符產生影響，因此爲了保證樣式容易被覆蓋，提升可維護行，css 選擇符需保證權重儘量低。