腳本之家服務器常用軟件

快捷導航

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

發(fā)布時間：2017-07-17 16:59:39 作者：天字天蝎

我要評論

這篇文章主要介紹了CSS優(yōu)先級計算的規(guī)則,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

最近在學習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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

Tag：css 優(yōu)先級計算

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容