CSS 樣式渲染的樣式渲染的優先順序優先順序

2021-10-05 06:57:51 字數 914 閱讀 2747

1、選擇符樣式的優先順序為:

內聯樣式 > 多級選擇符樣式 > id選擇符樣式 > class選擇符樣式 > tag選擇符樣式
比如標籤內定義的 style=「color:red」 是內聯樣式,是優先順序最高的,而類似 div 這樣的單純tagname的選擇符是優先順序最低的。

2、多層的選擇符會根據單層選擇符的優先順序逐級載入並保留優先權最高的樣式,級別越多許可權越高,同級別內按照單層選擇符優先順序決定保留樣式。

多級選擇符定義優先順序高於單層選擇符定義,比如 div #mydiv 這個定義會覆蓋 #mydiv 定義內的同名屬性值。

3、選擇符樣式的載入順序是按文字流自上而下載入,不同選擇符的樣式優先順序跟定義的位置先後沒有關係,比如應用於同一標籤的id和class選擇符,無論先定義誰,都是id選擇符優先順序高。

同名選擇符的樣式總是後載入的相同樣式屬性優先順序高,會覆蓋當前已有的屬性定義;可以認為同名選擇符的樣式會被瀏覽器按照載入順序合併不同樣式屬性定義、覆蓋相同樣式屬性定義,最終形成乙個唯一的整體class定義。

4、多個class選擇符應用於同乙個標籤時,各class的優先順序跟應用次序無關,只與它們定義時的位置次序有關。個人猜想,ie很可能是把所有應用到的class全部列舉出來,然後按照這些class的定義次序進行合併,跟這些class被引用時的次序無關。看來ie對多個不同名class樣式的合併仍然遵循其對同名class定義合併的原則,文字流順序內後定義的優先順序高。

比如 不論c0,c1,c2被引用時是什麼次序,合併順序仍然按照他們在樣式表裡的定義順序來合併。不知道其它瀏覽器是不是也遵循這個原則?以前總是想當然的認為多個class應用於同一標籤時,是按照引用次序來渲染樣式的,經過測試才知道,還是按照被引用class的定義次序來渲染的。

總結:樣式渲染的優先順序取決於選擇符的個性化程度,私有程度越高優先順序越高。

css樣式渲染規則

css選擇符是有權重的。作用於同一標籤的樣式同一屬性,究竟哪個能起到作用,而哪個會被覆蓋掉,這就跟css選擇符權重有關了。在說明權重之前,必須強調一點,那就是css樣式規則渲染是先就近渲染,然後才依據選擇符權重進行渲染。看看什麼是就近渲染原則 html div id test p 測試字型顏色 p ...

Javascript獲取css渲染樣式值技巧

一直忙沒更新,總結下近期開發中使用的關於提取css渲染樹樣式的方法 提取渲染樣式 ie從domelement.currentstyle物件中提取即時計算的樣式 標準瀏覽器使用window.getcomputedstyle方法獲取 ie下還有個runtimestyle物件,可以應用樣式又不改變dom的...

CSS用於渲染HTML元素標籤的樣式

css 是在 html 4 開始使用的,是為了更好的渲染html元素而引入的.css 可以通過以下方式新增到html中 最好的方式是通過外部引用css檔案.你可以通過本站的 css 教程 學習更多的 css 知識。當特殊的樣式需要應用到個別元素時,就可以使用內聯樣式。使用內聯樣式的方法是在相關的標籤...