CSS優先級計算


CSS的權重

一、CSS的引入方式

  1. 在節點元素上,使用style屬性
  2. 通過link引入外部文件
  3. 通過style標簽在頁面內引入
三種引入方式的區別

index.html文件

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="body.css">
<style type="text/css">
body {
background: red;
}
</style>
</head>
<body style="background: yellow;">
</body>
</html>

body.css文件

    body {
background: green;
}
  1. 第一種方式相對后面兩種優先級高,與引入順序無關
    • 無論linkstyle標簽放在head內,還是放在body內,或者放在html標簽結尾,頁面都會呈現yellow
  2. 第二種和第三種為平級引入,后引入的樣式覆蓋之前的引入樣式
    • 去掉body上的style標簽
    • 調整linkstyle標簽的先后順序。link在前,style標簽在后,頁面呈現red,相反,頁面會呈現green

二、獲取節點的方式

  1. id
  2. class
  3. 標簽
  4. 屬性
id

在一個頁面中id值應該是唯一,但是,當出現多個相同id時,樣式對所有id節點是有效的,使用方式:#后面跟節點id

<body>
<p id="id_p">第一個段落</p>
<p id="id_p">第二個段落</p>
</body>
#id_p {
color: red;
}

結果顯示,兩個段落中的文字都呈現red

  1. id相對class和標簽具有更高的權重,當idclass、標簽同時對一個節點設置樣式時,id的權重為最高
  2. 通過linkstyle標簽對同一個id設置樣式時,后引入的樣式覆蓋之前的樣式
class

使用class可以對多個節點同時設置樣式,並且可以疊加class使用。使用方式.后面跟節點單個class

<body>
<p class="class-p">第一個段落</p>
<p class="class-p class-p-2">第二個段落</p>
</body>
.class-p {
color: red;
}
.class-p-2 {
color: green;
}

此時,第一個段落呈現red,第二個段落呈現green

調整html

<body>
<p class="class-p">第一個段落</p>
<p class="class-p-2 class-p">第二個段落</p><!-- 調換class-p 和 class-p-2 的順序 -->
</body>

調整class-pclass-p-2的位置后,頁面呈現效果不變。說明:class樣式的渲染和class的使用順序無關,與class樣式設置的先后順序有關,同權重的class樣式,在樣式設置中,靠后的樣式設置覆蓋之前的樣式設置

屬性

通過節點上的屬性也可以得到要進行樣式設置的節點

<body>
<p>第一個段落</p>
<p title="第二個段落的title">第二個段落</p>
</body>
[title] {
color: red;
}

第二個段落有title屬性,所以第二個段落呈現red

標簽

通過標簽名獲取節點進行樣式設置

<body>
<p>第一個段落</p>
<p>第二個段落</p>
</body>
p {
color: red;
}

頁面中所有p標簽節點呈現red

混合

以上四種方式可以混合使用,對相應的節點進行樣式設置。結合方式包括層級嵌套、樣式疊加、節點關聯等。最終以權重高者為呈現效果。

三、樣式權重

以上四種方式,針對單個而言,id最高,class和屬性同級(后面的樣式覆蓋之前的樣式),標簽最低。

當四種方式混合使用時,則以權重的結果為准。對同一結點存在的idclass、屬性和標簽樣式進行排序,排位第一者為最終呈現效果。例如:對於節點p存在多種類型的樣式設置,首先挑選所有帶id的樣式,包括嵌套樣式。相同id下,對另一類型樣式進行排序

<body class="body">
<p id="id_p">第一個段落</p>
</body>
.body #id_p {
color: red;
}

#id_p {
color: green
}

雖然兩種樣式設置都有id,並且green效果在red之后被設置,但是通過排序可以得到相同#id_p下,前一個存在.body,所以最終呈現效果為red

存在class、屬性和標簽的樣式時,依次排序,同類型或同權重(class和屬性同權重)的樣式,靠后的樣式覆蓋之前的樣式(以類型為准,不以名稱為准),最終排位第一者為最終呈現效果。

注意:

  1. 嵌套、疊加、>+等方式,不會影響最終效果。
  2. :nth-child:first-child:last-child等偽類高於class和屬性

四、!important

!important為樣式中的特例,它的權重為最高,高於idclass、屬性、標簽以及style屬性

<body class="body" style="background: red"></body>
.body {
background: green !important;
}

頁面呈現效果為green。但是當對樣式設置進行排序時,仍然是同類型樣式下,以另一類型權重高者為最終效果。例如

body.body {
background: blue !important;
}
.body {
background: green !important;
}

相同class!important下,前一種樣式設置存在body標簽,后一種則沒有,所以最終效果呈現blue

說明
  1. 盡量避免使用!important。因為!important權重最高,會對節點的該屬性做強制性設置,在使用時要慎重

  2. 使用場景
  • 引入插件時,對插件中的樣式進行強覆蓋。當引入插件時,在不想修改插件中的樣式代碼情況下,可通過!important對插件內的樣式屬性進行強制復寫
  • 對行內樣式進行強覆蓋。對於自動生成或者動態引入的的帶有行內樣式html結構時,可以通過!important對行內樣式進行強制復寫
  1. 變通

!important在很多時候是不建議使用的,在stylelint中有一項規則即禁止使用!important。有一種變通的方式,可以在多數情況下實現類似!important`的效果

html <body class="body"> <p class="p"> <span class="span">一段文本</span> </p> </body>

css .body .p .span { color: red; } .span.span.span.span.span {/** 自身樣式疊加 **/ color: green; }

在不考慮行內樣式和id的情況下,對自身樣式進行重復疊加多次使用,可以增加class權重,對樣式進行復寫。

使用前提:

  1. 沒有行內樣式style屬性
  2. 沒有id樣式
  3. 自身樣式疊加次數多余嵌套個數

好處:不用考慮DOM層級關系,減少層級嵌套

五、總結

綜合以上說明,權重的計算基本遵從以下規則:

  1. 按類型比對,類型權重高者顯示;
  2. 同類型,按數量比對,多者顯示;
  3. 同數量,按先后順序比對,后者顯示

嵌套的使用建議

樣式嵌套使用,除了增加權重外,也體現了DOM的某種結構關系。但嵌套並不是在任何情況下都需要的。

  • 嵌套多用於塊內獨有的樣式設置。某種樣式僅在某個塊內有效,可使用嵌套。
  • 多個頁面同時開發時,為避免合並后樣式被覆蓋,可使用嵌套。

嵌套的使用並不是越多越好。嵌套越多,權重越大,但同時對頁面的性能消耗也越大。建議使用繼承和樣式疊加。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com