CSS優(yōu)先級計算的規(guī)則

最近在學習CSS優(yōu)先級計算的規(guī)則這個地方知識點挺多的,而且很重要,所以,今天添加一點小筆記。
CSS的權(quán)重
一、CSS的引入方式
1.在節(jié)點元素上,使用style屬性
2.通過link引入外部文件
3.通過style標簽在頁面內(nèi)引入
三種引入方式的區(qū)別
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.第一種方式相對后面兩種優(yōu)先級高,與引入順序無關(guān) 無論link和style標簽放在head內(nèi),還是放在body內(nèi),或者放在html標簽結(jié)尾,頁面都會呈現(xiàn)yellow
2.第二種和第三種為平級引入,后引入的樣式覆蓋之前的引入樣式 去掉body上的style標簽
調(diào)整link和style標簽的先后順序。link在前,style標簽在后,頁面呈現(xiàn)red,相反,頁面會呈現(xiàn)green
二、獲取節(jié)點的方式
1.id
2.class
3.標簽
4.屬性
id
在一個頁面中id值應該是唯一,但是,當出現(xiàn)多個相同id時,樣式對所有id節(jié)點是有效的,使用方式:#后面跟節(jié)點id值
<body> <p id="id_p">第一個段落</p> <p id="id_p">第二個段落</p> </body>
#id_p { color: red; }
結(jié)果顯示,兩個段落中的文字都呈現(xiàn)red
1.id相對class和標簽具有更高的權(quán)重,當id和class、標簽同時對一個節(jié)點設(shè)置樣式時,id的權(quán)重為最高
2.通過link和style標簽對同一個id設(shè)置樣式時,后引入的樣式覆蓋之前的樣式
class
使用class可以對多個節(jié)點同時設(shè)置樣式,并且可以疊加class使用。使用方式.后面跟節(jié)點單個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; }
此時,第一個段落呈現(xiàn)red,第二個段落呈現(xiàn)green
調(diào)整html
<body> <p class="class-p">第一個段落</p> <p class="class-p-2 class-p">第二個段落</p><!-- 調(diào)換class-p 和 class-p-2 的順序 --> </body>
調(diào)整class-p和class-p-2的位置后,頁面呈現(xiàn)效果不變。說明:class樣式的渲染和class的使用順序無關(guān),與class樣式設(shè)置的先后順序有關(guān),同權(quán)重的class樣式,在樣式設(shè)置中,靠后的樣式設(shè)置覆蓋之前的樣式設(shè)置
屬性
通過節(jié)點上的屬性也可以得到要進行樣式設(shè)置的節(jié)點
<body> <p>第一個段落</p> <p title="第二個段落的title">第二個段落</p> </body>
[title] { color: red; }
第二個段落有title屬性,所以第二個段落呈現(xiàn)red
標簽
通過標簽名獲取節(jié)點進行樣式設(shè)置
<body> <p>第一個段落</p> <p>第二個段落</p> </body>
p { color: red; }
頁面中所有p標簽節(jié)點呈現(xiàn)red
混合
以上四種方式可以混合使用,對相應的節(jié)點進行樣式設(shè)置。結(jié)合方式包括層級嵌套、樣式疊加、節(jié)點關(guān)聯(lián)等。最終以權(quán)重高者為呈現(xiàn)效果。
三、樣式權(quán)重
以上四種方式,針對單個而言,id最高,class和屬性同級(后面的樣式覆蓋之前的樣式),標簽最低。
當四種方式混合使用時,則以權(quán)重的結(jié)果為準。對同一結(jié)點存在的id、class、屬性和標簽樣式進行排序,排位第一者為最終呈現(xiàn)效果。例如:對于節(jié)點p存在多種類型的樣式設(shè)置,首先挑選所有帶id的樣式,包括嵌套樣式。相同id下,對另一類型樣式進行排序
<body class="body"> <p id="id_p">第一個段落</p> </body>
.body #id_p { color: red; } #id_p { color: green }
雖然兩種樣式設(shè)置都有id,并且green效果在red之后被設(shè)置,但是通過排序可以得到相同#id_p下,前一個存在.body,所以最終呈現(xiàn)效果為red
存在class、屬性和標簽的樣式時,依次排序,同類型或同權(quán)重(class和屬性同權(quán)重)的樣式,靠后的樣式覆蓋之前的樣式(以類型為準,不以名稱為準),最終排位第一者為最終呈現(xiàn)效果。
注意:
1.嵌套、疊加、>、 +等方式,不會影響最終效果。
2.:nth-child、:first-child、:last-child等偽類高于class和屬性
四、!important
!important為樣式中的特例,它的權(quán)重為最高,高于id、class、屬性、標簽以及style屬性
<body class="body" style="background: red"></body>
.body { background: green !important; }
頁面呈現(xiàn)效果為green。但是當對樣式設(shè)置進行排序時,仍然是同類型樣式下,以另一類型權(quán)重高者為最終效果。例如
body.body { background: blue !important; } .body { background: green !important; }
相同class及!important下,前一種樣式設(shè)置存在body標簽,后一種則沒有,所以最終效果呈現(xiàn)blue
說明
1.盡量避免使用!important。因為!important權(quán)重最高,會對節(jié)點的該屬性做強制性設(shè)置,在使用時要慎重
2.使用場景
- 引入插件時,對插件中的樣式進行強覆蓋。當引入插件時,在不想修改插件中的樣式代碼情況下,可通過!important對插件內(nèi)的樣式屬性進行強制復寫
- 對行內(nèi)樣式進行強覆蓋。對于自動生成或者動態(tài)引入的的帶有行內(nèi)樣式html結(jié)構(gòu)時,可以通過!important對行內(nèi)樣式進行強制復寫
1.變通
!important在很多時候是不建議使用的,在stylelint中有一項規(guī)則即禁止使用!important。有一種變通的方式,可以在多數(shù)情況下實現(xiàn)類似!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; }
在不考慮行內(nèi)樣式和id的情況下,對自身樣式進行重復疊加多次使用,可以增加class權(quán)重,對樣式進行復寫。
使用前提:
1.沒有行內(nèi)樣式style屬性
2.沒有id樣式
3.自身樣式疊加次數(shù)多余嵌套個數(shù)
好處:不用考慮DOM層級關(guān)系,減少層級嵌套
五、總結(jié)
綜合以上說明,權(quán)重的計算基本遵從以下規(guī)則:
1.按類型比對,類型權(quán)重高者顯示;
2.同類型,按數(shù)量比對,多者顯示;
3.同數(shù)量,按先后順序比對,后者顯示
嵌套的使用建議
樣式嵌套使用,除了增加權(quán)重外,也體現(xiàn)了DOM的某種結(jié)構(gòu)關(guān)系。但嵌套并不是在任何情況下都需要的。
- 嵌套多用于塊內(nèi)獨有的樣式設(shè)置。某種樣式僅在某個塊內(nèi)有效,可使用嵌套。
- 多個頁面同時開發(fā)時,為避免合并后樣式被覆蓋,可使用嵌套。
嵌套的使用并不是越多越好。嵌套越多,權(quán)重越大,但同時對頁面的性能消耗也越大。建議使用繼承和樣式疊加。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
- 下面小編就為大家?guī)硪黄猚ss優(yōu)先級計算方法(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-19
- CSS在使用選擇器對元素施加屬性的時候會有先后順序,包括特殊性和重要性等概念在內(nèi),這里我們就來詳解CSS中的選擇器優(yōu)先級順序,需要的朋友可以參考下2016-06-21
- CSS中的選擇器是分權(quán)重的,如果不加注意則很有可能會遇到樣式層疊的問題,下面我們就來詳解CSS中的選擇器優(yōu)先級及樣式層疊問題解決,需要的朋友可以參考下2016-06-14
CSS z-index 層級關(guān)系優(yōu)先級的概念
這篇文章主要介紹CSS z-index 層級關(guān)系優(yōu)先級的概念,講解的比較詳細,需要的朋友可以參考下。2016-06-06- 本文給大家分享css 優(yōu)先級的兩種理解方式,每種方式給大家介紹的非常詳細,需要的朋友參考下吧2020-02-06