CSS 的層疊規則說明
2024-07-11 08:47:10
供稿：網友
整個過程
查找competing rule集。
對competing rules進行排序；
對元素，應用sorted rules中的屬性（層疊過程，高優先級的在上面，覆蓋了下面低優先級的屬性)
最后渲染，考慮繼承值（也是個層疊過程)和默認值, 再做屬性值轉換。
原則就是 general ---> special
查找階段
遍歷所有css rule, 找出有效的rule.
Rules 排序
先 selector group，后 position group
selector groups：（從高到低）
1. !important 最高
2. inline style
3. id selector
4. class and pseudo-class pseudo-element, attribute selector
5. element selector
6. * universal selector
先看群組級別，
最高群組相同的話， 再看本群組的積分（多少個）,
如果數量相同，就要看更低的群組，重復；
如果還相同，就要看 postion group:
position group:
1. <style> css rule</style>
2. <style> @import css; <style>
3.<link />
4. <link /> ----> @import css; 外部文件中的@import css中的rule
5. user setting style ，如果在這里的樣式使用了 !important那么就是最高的等級了(比文檔中的!importance還高，反強奸)
6. user agent css 瀏覽器默認樣式
先看位置群組級別，如果相同就看在文檔中出現的順序(后面覆蓋前面)
這樣就為 元素 獲得了所有的rule中屬性值，最后建立了 doc 的css屬性樹。
渲染階段
渲染的時候，取元素的已有css屬性值出來渲染；
對于CSS屬性樹中沒有的屬性，如果這些屬性可以被繼承，那么就考慮元素的祖父結點中的屬性值;
如果還是不能確定屬性值， 這時使用就使用屬性的默認值。
上面的就把元素的所有值確定了，但因為有些值是相對值( 10%, 2ex等），這時需要把相對值計算出 絕對值， 不是所有值的是有效的，這時又要轉換成實際值(數值取整等)。
最后瀏覽器用這些 actual attribute value 去渲染。
其它：
視覺繼承(z序)： 子元素在父元素上面，后面的元素在前面的元素的上面，默認背景是透明。
測試發現：*.class == .class
