[css選擇器]學css前要搞懂的選擇器的優先級和權重問題

css的優先級以前一直沒怎麼注意沒當回事，總覺得對同一元素靠後的渲染會覆蓋前面的渲染，要是覆蓋不了那就來個!important嘛。直到我那在學前端基礎的後端夥伴拿一個問題問住了我，我才意識到這是重點中的重點啊！啪啪啪打臉！

 

優先級關係

先來看css爲元素添加樣式的幾種規則（優先級a>b>c>d，!important無敵）

標記	a	b	c	d
規則	使用行內樣式style	使用id選擇器	使用類、屬性、僞類選擇器	使用元素、僞元素選擇器
例子	style=""	#id	class 、 [type="submit'] 、 :hover	p、::after

 

權重計算

用a,b,c,d分別表示相關規則出現的次數

選擇符	權重(a,b,c,d)	權值
style=""	(1,0,0,0)	1000
#wrapper #content	(0,2,0,0)	200
#content .datePosted	(0,1,1,0)	110
div #content{}	(0,1,0,1)	101
#content	(0,1,0,0)	101
p.comment .datePosted{}	(0,0,2,1)	21
p.comment{}	(0,0,1,1)	11
div p{}	(0,0,0,2)	2
p	(0,0,0,1)	1
.container .row .col-left	(0,0,3,0)	30
.col-left	(0,0,1,0)	10

 

補充

1.雖然提升選擇器的權重值能有效解決靠後的渲染失敗問題，但也僅僅是個解決方法，渲染不衝突的狀況下，不要寫那麼多累贅

2.!important雖無敵和style雖一人之下，但都應儘可能避免使用

3.在學習過程當中，你可能發現給選擇器加權值的說法，即 ID 選擇器權值爲 100，類選擇器權值爲 10，標籤選擇器權值爲 1，當一個選擇器由多個 ID 選擇器、類選擇器或標籤選擇器組成時，則將全部權值相加，而後再比較權值。這種說法實際上是有問題的。好比一個由 11 個類選擇器組成的選擇器和一個由 1 個 ID 選擇器組成的選擇器指向同一個標籤，按理說 110 > 100，應該應用前者的樣式，然而事實是應用後者的樣式。錯誤的緣由是：權重的進制是並非十進制，CSS 權重進制在 IE6 爲 256，後來擴大到了 65536，現代瀏覽器則採用更大的數量。。仍是拿剛剛的例子說明。11 個類選擇器組成的選擇器的總權值爲 110，但由於 11 個均爲類選擇器，因此其實總權值最多不能超過 100， 你能夠理解爲 99.99，因此最終應用後者樣式。