資訊專欄INFORMATION COLUMN
摘要：層疊樣式表層疊規則你或許知道是層疊樣式表的縮寫。但你不一定真正的理解了其中層疊的含義。用戶自定義樣式雖然規范中有，但從起，開始不支持用戶自定義樣式表，而是建議使用擴展來實現。網站提供的樣式表，則是我們所提供的的樣式。即不為的元素的計算值為。
層疊樣式表 層疊規則
你或許知道 CSS 是 Cascading Style Sheets（層疊樣式表）的縮寫。但你不一定真正的理解了其中層疊的含義。
你可能會以為層疊指的是選擇器的優先級，但這是不準確的。
對于瀏覽器頁面上某個元素的某個屬性值，它可能會有多個來源（Cascading Origins）：
用戶代理 (user agent)提供的樣式
用戶自定義的樣式
網站提供的樣式
用戶代理即是指瀏覽器，https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/css/html.css 這里是 chromium 的樣式表。現在我們常常會使用 reset.css 或者 normalize.css 使的各個瀏覽器之間默認樣式統一。
用戶自定義樣式雖然規范中有，但從 chrome 33 起，開始不支持用戶自定義樣式表，而是建議使用擴展來實現。
網站提供的樣式表，則是我們所提供的 css 的樣式。
來源之間是存在優先級的（和選擇器的優先級是兩回事），優先級高的會覆蓋優先級低。我們來驗證一下：
https://codepen.io/gygy/pen/m...
可以看到 ruby > rt { font-size: 50% } 是來自 user agent stylesheet。而 rt { font-size: 24px } 來自網站作者，如果單論選擇器的權重，它是低于 ruby > rt 的。
但是它依然覆蓋了 user agent stylesheet 的 font-size 屬性。原因就是 css 會優先根據屬性的來源判斷。對于相同來源的屬性，再應用權重規則。
我們也可以通過 !important 聲明某個屬性的重要性，再結合它的來源，于是有如下的優先級規則（忽略用戶自定義的樣式）：
用戶代理
來源用戶代理的 !important 屬性
網站作者
CSS 動畫（Animation 和 Transition）
網站作者 !important
其中對于 CSS 動畫，在給定時間中 CSS 只會從某一個 @keyframes 中獲取值，而不是某幾個 @keyframe 的混合。@keyframes 里定義的值會覆蓋普通值，但是優先級低于 !important。
權重規則對于同一來源的 CSS。我們要確定某個元素的某個屬性的值，涉及到該元素的選擇器的權重問題。選擇器大致分為幾類：
元素選擇器（Elemental selectors）：標簽名稱。
屬性選擇器（Attribute selectors）：id class 某個屬性。
偽類（Pseudo-classes）：匹配處于確定狀態的一個或多個元素，表現的像一個 class。
偽元素（Pseudo-elements）:匹配處于相關的確定位置的一個或多個元素，表現的像一個 element。
組合選擇器（Combinators）：div > span 之類的復合選擇器。
多重選擇器（Multiple selectors）多個選擇器之間用逗號隔開。
它們之間的權重規則計算：
A selector’s specificity is calculated for a given element as follows:
count the number of ID selectors in the selector (= A)
count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= B)
count the number of type selectors and pseudo-elements in the selector (= C)
ignore the universal selector
If the selector is a selector list, this number is calculated for each selector in the list. For a given matching process against the list, the specificity in effect is that of the most specific selector in the list that matches.
簡單的說來 id 優先級最高，其次是類和偽類再次是元素和偽元素。然后根據它們各自的數量判斷。
其實說到底不建議寫過于復雜的選擇器，會影響性能和維護代碼。建議采用 BEM 規范，書寫 CSS 選擇器。
CSS 的值的計算過程為了得到 CSS 的值的生成有很多個步驟：
收集應用到這個元素上面的所有的聲明值（Declared values），可能有 0 個或者多個，包括瀏覽器的樣式表和網站作者樣式表中定義的。
根據聲明值和上述的層疊規則得到這個屬性的層疊值（Cascaded Values），層疊值只能有一個或者為空。
如果層疊值存在，則指定值（Specified Values）等于層疊值。否則，則會應用 CSS 中屬性繼承的規則，得到一個繼承值（Inherited value），層疊值等于這個繼承值。如果該屬性不適用于繼承，指定值會等于這個屬性的初始值（Initial value）。每個元素的每個屬性都有且只有一個指定值。
一些屬性值是屬于相對單位 如 1em 會被轉化為 px，在這個過程中相對值會被絕對化，得到計算值（Computed Values），這個值可以被用于繼承。
應用值（Used Values）是瀏覽器根據計算器，然后完成剩余的計算，得到理論上布局的值。如 width: auto 在此過程中，會被計算得出精確的像素值。
實際值（Actual Values）是指瀏覽器根據現實情況布局所用到值。比如 px 如果是小數，會被轉化為整數布局，因為物理上 1px 不可分。
舉幾個例子說明一下上述步驟：
對于 font-size，由于它是可繼承的值，所以即使你沒為某個元素設置 font-size 大小，它的層疊值為空，它也會在第三步的時候，將指定值賦值于獲取他的繼承值。（這個繼承者來源于父級元素的計算值）。
對于 float 不為 none 的元素，即使你手動聲明了 display: inline，此時 display 在第四步的時候，會被賦值為 block。即 float 不為 none 的元素的 display 計算值為 block。
參考鏈接
W3C 規范：選擇器
MDN: CSS 層疊
W3C 規范：層疊
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114027.html
摘要：摘自設計指南樣式來源上文中提到，之所以有層疊的概念，是因為有多個樣式來源。優先級相同條件下例如都來自引用樣式，覆蓋的默認規則是后者覆蓋前者，但是有一個特殊情況，其實優先級最高。 這一節就開始實踐上一節的思路！ 1.層疊的概念 簡言之，層疊就是瀏覽器對多個樣式來源進行疊加，最終確定結果的過程。舉一個簡單的例子： showImg(https://segmentfault.com/img/b...
摘要：在的發展過程中，是最早與之父合作的人之一。問您認為中國的開發者雖然起步晚，但是現在已經趕上了是的。但是我知道，它們只是進化的一部分。第一個最主要的原因就是要保護。 非商業轉載請注明作譯者、出處，并保留本文的原始鏈接：http://www.ituring.com.cn/article/194473 Bert Bos是一位計算機科學家，他也是CSS的創始人之一。在CSS的發展過程...
摘要：知道存在是很有用的，這樣當你在別人的代碼中遇到它時，你就知道它是什么了。如上面所示的示例所示，元素選擇器具有很低的特殊性。類選擇器具有更高特殊性，所以將戰勝元素選擇器。個位在整個選擇器中每包含一個元素選擇器或偽元素就在該列中加分。 在實際的工作中，我們可能還有些疑惑，當有多個選擇器作用在一個元素上時，哪個規則最終會應用到元素上？其實這是通過層疊機制來控制的，這也和樣式繼承(元素從其父元...
摘要：相反的，提供了全局作用域和局部作用域。組成界面的分子的樣式可以通過元素選擇器定位。元素選擇器的優先級很低，因此他們不會覆蓋任何基于類選擇器的樣式。使用元素選擇器有以下優點避免了的冗長沒有冗余的類。 最近學習到CSS的繼承屬性，正好看到這篇文章，便將它翻譯出來。作者的思想，在平時的項目中或多或少都有用過，但是從來沒有仔細去思考如何利用這些特性讓代碼更加優雅。 我熱愛模塊化設計。長期以來，...
摘要：一標簽繼承不了父元素的樣式我們知道，諸如等一些屬性是可以通過繼承父元素得到的。那么這樣就會涉及一個層疊優先級的問題。繼承的屬性優先級是最低的解決方法我們通過一句簡單的樣式就能解決這個問題 一 a標簽繼承不了父元素的樣式？ 我們知道，諸如font-size,color等一些屬性是可以通過繼承父元素得到的。那么，為什么當我們想讓a標簽去繼承父元素的顏色時，結果卻常常不能如我們所愿呢？要想...
閱讀 3281·2021-11-25 09:43
閱讀 2084·2021-09-22 10:02
閱讀 3310·2021-09-06 15:00
閱讀 2298·2019-08-30 15:56
閱讀 2347·2019-08-30 15:54
閱讀 3224·2019-08-30 14:14
閱讀 2258·2019-08-29 17:25
閱讀 2902·2019-08-29 17:16
