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