CSS 某些元素使用了 user agent stylesheet

在調試頁面時,我們有時會看到一些元素的樣式和期望的不符,debug查看會發現樣式來源於 user agent stylesheet。

user agent stylesheet 實際上是瀏覽器爲了方便頁面展示,提升用戶體驗,提供的默認的樣式。對於不同瀏覽器,提供的默認樣式會略有不同。

那麼如何不使用默認樣式呢?這裏就涉及到CSS樣式的優先級問題。

同一個元素,可能在多個文件定義了樣式,但是最終瀏覽器只會選擇一種。

在非瀏覽器原因的情況下一般都是會根據選擇器的優先級來渲染。儘管css選擇器有許多組合,但我們仍有一定的規律來識別它們的優先級,畢竟瀏覽器也是通過一定的方式計算後來決定採用哪種樣式進行渲染的。

來源不同,比較來源

對於不同源樣式文件,除了important聲明外,作者定義>用戶定義>用戶代理,更爲詳細的優先級順序如下,從上到下依次增高:
user agent stylesheet
user declarations (normal)
author declarations (normal)
author declarations (!important)
user declarations (!important)

這裏我們就可以看到,瀏覽器默認樣式的優先級是最低的。如果不想使用默認樣式,只需要自己定義一個就可以。

來源相同,比較Weight

對於同源文件,我們會根據特殊值weight來判斷。我們把特殊性分爲4個等級,每個等級代表一類選擇器,每個等級的值爲其所代表的選擇器的個數乘以這一等級的權值,最後把所有等級的值相加得出選擇器的特殊值。
4個等級的定義如下:
A等:代表內聯樣式,如: style=””,權值爲1000。
B等:代表ID選擇器,如:#content,權值爲100。
C等:代表類,僞類和屬性選擇器,如.content,權值爲10。
D等:代表類型選擇器和僞元素選擇器,如div p,權值爲1。
Weight = nA + nB + nC + nD (其中n爲該選擇器的個數)。
Weight越大,則優先級越高。

來源相同,Weight相同,比較順序

聲明靠後者覆蓋靠前者。

 

參考 

https://qingywen.github.io/2017/05/05/css-priority/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章