詳解CSS優先權計算的規則
- 小云云原創
- 2017-12-19 09:38:092046瀏覽
最近在學習CSS優先權計算的規則這個地方知識點挺多的，而且很重要，本文主要介紹了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.第一種方式相對後面兩種優先級高，與引入順序無關無論link和style標籤放在head內，還是放在body內，或者放在html標籤結尾，頁面都會呈現yellow
2.第二種和第三種為平級引入，後引入的樣式覆寫先前的引入樣式去掉body上的style標籤
調整link和style標籤的先後順序。 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和標籤具有更高的權重，當id和class、標籤同時對一個節點設定樣式時，id的權重為最高
2.透過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，第二個段落呈現green
調整html
<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
標籤
透過標籤名稱取得節點進行樣式設定
<body> <p>第一个段落</p> <p>第二个段落</p> </body>
p {
color: red;
}
頁面中所有p標籤節點呈現red
混合
以上四種方式可以混合使用，對相應的節點進行樣式設定。結合方式包括層級巢狀、樣式疊加、節點關聯等。最終以權重高者為呈現效果。
三、樣式權重
以上四種方式，針對單一而言，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和屬性同權重）的樣式，靠後的樣式覆蓋之前的樣式（以類型為準，不以名稱為準），最終排位第一者為最終呈現效果。
注意：
1.嵌套、疊加、>、 +等方式，不會影響最終效果。
2.:nth-child、:first-child、:last-child等偽類別高於class與屬性
四、!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
說明
1.盡量避免使用!important。因為!important權重最高，會對節點的該屬性做強制性設置，在使用時要慎重
#2.使用場景
- ##引入插件時，對插件中的樣式進行強覆蓋。當引入外掛程式時，在不想修改外掛程式中的樣式程式碼情況下，可透過!important對外掛程式內的樣式屬性進行強制複寫
- 對行內樣式進行強覆寫。對於自動產生或動態引入的的帶有行內樣式html結構時，可以透過!important對行內樣式進行強制複寫
!important在很多時候是不建議使用的，在stylelint中有一項規則即禁止使用!important。有一種變通的方式，可以在多數情況下實現類似!important`的效果
html
一段文字
css .body .p .span { color: red; } .span.span.span.span. span {/**自身樣式疊加 **/ color: green; }
在不考慮行內樣式和id的情況下，對自身樣式進行重複疊加多次使用，可以增加class權重，對樣式進行複寫。
使用前提：
1.沒有行內樣式style造型
2.沒有id樣式
3.自身樣式疊加次數多餘巢狀個數
好處：不用考慮DOM層級關係，減少層級巢狀
五、總結
#綜合以上說明，權重的計算基本上遵從以下規則：
# #1. 依類型比對，類型權重高者顯示；
2. 同類型，依數量比對，多者顯示；
以上是詳解CSS優先權計算的規則的詳細內容。更多資訊請關注PHP中文網其他相關文章！