這次給大家帶來CSS優先順序計算的底層規則,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.使用情境
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的某種結構關係。但嵌套並不是在任何情況下都需要的。
嵌套多用於塊內專屬的樣式設定。某種樣式僅在某個塊內有效,可使用嵌套。
多個頁面同時開發時,為避免合并後樣式被覆蓋,可使用嵌套。
嵌套的使用並不是越多越好。嵌套越多,權重越大,但同時對頁面的效能消耗也越大。建議使用繼承和樣式疊加。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
用CSS3實現彈幕效果
你不知道的冷門CSS屬性
css的絕對位置怎麼相容所有的解析度