11種樣式選擇器與樣式優先順序計算

語言: CN / TW / HK

theme: github highlight: a11y-dark


本文已參與「新人創作禮」活動,一起開啟掘金創作之路。

11種樣式選擇器與樣式優先順序計算

tips:每個技術點都值得優學優寫:12期

好文推薦:

約2萬字-Vue原始碼解讀彙總篇(續更)

覆盤基於進階圖的30+前端常用知識點

寫在前面

從前偶爾也敢胡吹一下,沒有搞不定的樣式,自己寫的樣式還好一些,現在是真不敢胡說了。 樣式之複雜,難以想象,本文再梳理一下有關樣式規則。

11 種樣式選擇器

  • 萬用字元選擇器,* 是萬用字元,表示其下的樣式對所有元素生效,但萬用字元的優先順序較低。
  • id選擇器,例如 #container
  • 類選擇器,例如 .box
  • 標籤選擇器(型別選擇器),例如 div span p 等元素標籤,直接以標籤名稱作為樣式選擇器
  • 後代選擇器,有層級關係的疊加樣式選擇器,是樣式選擇器的一種組合使用,例如 div p
  • 子選擇器,例如 ul>li 或 div>p,對 ul 直接的子元素 li 設定樣式,對 div 的直接子元素 p 設定樣式。
  • 偽類選擇器,例如 a:hover,當滑鼠懸浮於 a 標籤時的樣式。
  • 偽元素選擇器,例如常見的 ::before 和 ::after,單冒號寫法也被現代瀏覽器支援(那是css2的語法)。
  • 相鄰兄弟選擇器,例如 img + p,樣式將對 img 圖片後面緊跟著的 p 段落生效。
  • 兄弟選擇器,A~B 作用於 A 元素之後所有同層級 B 元素。
  • 屬性選擇器,通過已經存在的屬性名或屬性值匹配元素,例如 a[href="https://example.org"] 或 a[title]。

樣式優先順序是如何計算的?

當同一個元素有多個宣告的時候,優先順序才會有意義。因為每一個直接作用於元素的 CSS 規則總是會接管/覆蓋(take over)該元素從祖先元素繼承而來的規則。

下面列表中,選擇器型別的優先順序是遞增的:

  • 1.型別選擇器(標籤選擇器)(例如,h1)和偽元素(例如,::before)
  • 2.類選擇器 (例如,.example),屬性選擇器(例如,[type="radio"])和偽類(例如,:hover)
  • 3.ID 選擇器(例如,#example)。

  • 巢狀組合選擇器 多種選擇器巢狀組合的優先順序,往往比單一的樣式選擇器優先順序更高。 例如 #id > div > p{} 的優先順序會比 p{} 和 div > p{} 的優先順序更高。

  • 內聯樣式 給元素新增的內聯樣式 (例如,style="font-weight:bold") 幾乎總會覆蓋外部樣式表的任何樣式 , 因此可看作是具有更高的優先順序。

  • !important 當在一個樣式宣告中使用一個 !important 規則時,此宣告將覆蓋任何其他宣告。 當然 !important 可以覆蓋 !important,此時需要比較權重。

  • 具體的優先順序權重規則略顯複雜: 一個選擇器的優先順序可以說是由四個部分相加 (分量),可以認為是個十百千 — 四位數的四個位數:

千位: 如果宣告在 style 的屬性(內聯樣式)則該位得一分。這樣的宣告沒有選擇器,所以它得分總是1000。 百位: 選擇器中包含ID選擇器則該位得一分。 十位: 選擇器中包含類選擇器、屬性選擇器或者偽類則該位得一分。 個位:選擇器中包含元素、偽元素選擇器則該位得一分。

下面是一個示例表:

| 選擇器 | 千位 | 百位 | 十位 | 個位 | 優先順序 | |-----------------------------------------|-----|------|-----|------|------| | h1 | 0 | 0 | 0 | 1 | 0001 | | h1 + p::first-letter | 0 | 0 | 0 | 3 | 0003 | | li > a[href*="en-US"] > .inline-warning | 0 | 0 | 2 | 2 | 0022 | | #identifier | 0 | 1 | 0 | 0 | 0100 | | 內聯樣式 | 1 | 0 | 0 | 0 | 1000 |

寫在後面

tips:可比條件下,寫在後面優先順序高於寫在前面的。

tips:可比條件下,同為載入樣式,後面載入的優先順序更高。

tips:可比條件下,@import 引用的樣式,權重小於 link 引入的樣式。