CSS優先權計算的底層規則-css教學-PHP中文網

首頁

web前端

css教學

CSS優先權計算的底層規則

php中世界最好的语言

Mar 21, 2018 pm 04:53 PM

css 優先權

這次帶給大家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.使用场景

引入插件时，对插件中的样式进行强覆盖。当引入插件时，在不想修改插件中的样式代码情况下，可通过!important对插件内的样式属性进行强制复写
对行内样式进行强覆盖。对于自动生成或者动态引入的的带有行内样式html结构时，可以通过!important对行内样式进行强制复写

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中文网其它相关文章！

熱AI工具

熱工具

熱門話題

Java教學

1665

CakePHP 教程

1423

Laravel 教程

1321

PHP教程

1269

C# 教程

1249

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。