CSS優先級計算

時間 2019-11-10

標籤 css 優先級計算欄目 CSS 简体版

原文原文鏈接

CSS的權重

1、CSS的引入方式

在節點元素上，使用style屬性
經過link引入外部文件
經過style標籤在頁面內引入

三種引入方式的區別

index.html文件css

<!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文件html

body {
        background: green;
    }

第一種方式相對後面兩種優先級高，與引入順序無關
- 不管link和style標籤放在head內，仍是放在body內，或者放在html標籤結尾，頁面都會呈現yellow
第二種和第三種爲平級引入，後引入的樣式覆蓋以前的引入樣式
- 去掉body上的style標籤
- 調整link和style標籤的前後順序。link在前，style標籤在後，頁面呈現red，相反，頁面會呈現green

2、獲取節點的方式

id
class
標籤
屬性

`id`

在一個頁面中id值應該是惟一，可是，當出現多個相同id時，樣式對全部id節點是有效的，使用方式：#後面跟節點id值性能

<body>
  <p id="id_p">第一個段落</p>
  <p id="id_p">第二個段落</p>
</body>

#id_p {
  color: red;
}

結果顯示，兩個段落中的文字都呈現redspa

id相對class和標籤具備更高的權重，當id和class、標籤同時對一個節點設置樣式時，id的權重爲最高
經過link和style標籤對同一個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，第二個段落呈現greencode

調整htmlhtm

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

調整class-p和class-p-2的位置後，頁面呈現效果不變。說明：class樣式的渲染和class的使用順序無關，與class樣式設置的前後順序有關，同權重的class樣式，在樣式設置中，靠後的樣式設置覆蓋以前的樣式設置排序

屬性

經過節點上的屬性也能夠獲得要進行樣式設置的節點繼承

<body>
  <p>第一個段落</p>
  <p title="第二個段落的title">第二個段落</p>
</body>

[title] {
  color: red;
}

第二個段落有title屬性，因此第二個段落呈現red開發

混合

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

3、樣式權重

以上四種方式，針對單個而言，id最高，class和屬性同級（後面的樣式覆蓋以前的樣式），標籤最低。

當四種方式混合使用時，則以權重的結果爲準。對同一結點存在的id、class、屬性和標籤樣式進行排序，排位第一者爲最終呈現效果。例如：對於節點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和屬性同權重）的樣式，靠後的樣式覆蓋以前的樣式（以類型爲準，不以名稱爲準），最終排位第一者爲最終呈現效果。

注意：

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

4、`!important`

!important爲樣式中的特例，它的權重爲最高，高於id、class、屬性、標籤以及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

說明

儘可能避免使用!important。由於!important權重最高，會對節點的該屬性作強制性設置，在使用時要慎重
使用場景
- 引入插件時，對插件中的樣式進行強覆蓋。當引入插件時，在不想修改插件中的樣式代碼狀況下，可經過!important對插件內的樣式屬性進行強制複寫
- 對行內樣式進行強覆蓋。對於自動生成或者動態引入的的帶有行內樣式html結構時，能夠經過!important對行內樣式進行強制複寫
變通

!important在不少時候是不建議使用的，在stylelint中有一項規則即禁止使用!important。有一種變通的方式，能夠在多數狀況下實現相似!important`的效果
```
<body class="body">
  <p class="p">
    <span class="span">一段文本</span>
  </p>
</body>
```
```
.body .p .span {
  color: red;
}
.span.span.span.span.span {/** 自身樣式疊加 **/
  color: green;
}
```
在不考慮行內樣式和id的狀況下，對自身樣式進行重複疊加屢次使用，能夠增長class權重，對樣式進行復寫。

使用前提：
1. 沒有行內樣式style屬性
2. 沒有id樣式
3. 自身樣式疊加次數多餘嵌套個數
好處：不用考慮DOM層級關係，減小層級嵌套