CSS權重

時間 2019-11-09

標籤 css 權重欄目 CSS 简体版

原文原文鏈接

一般，在咱們的佈局中，css每條規則的權重是致使應用在元素上的css沒有生效的主要緣由。爲此，咱們須要瞭解瀏覽器是如何利用權重進行解析的。css

css 權重的概念

css 權重即每條 css 在應用時所佔據的份量，優先級如何，它決定了瀏覽器如何將這條規則應用到相應的元素上。每個選擇器都有本身的權重級別，而每一條 css 規則的權重是由這些選擇器的權重加權而成，最終，權重高的 css 將會應用到相應的元素上。html

權重的等級

在 css 中不一樣的選擇器有不一樣的權重等級，主要分爲如下四個等級:瀏覽器

內聯樣式bash

內聯樣式(行內樣式)即經過 style 屬性直接寫在元素上的樣式，以下佈局
```
<div style={{ color: red }}>
複製代碼
```
id 選擇器post

id 是一個元素的標識，id 選擇器經過#表示，以下:spa
```
// css
#title {
  color: red;
}
// html
<div id="title">
複製代碼
```

類、僞類、屬性選擇器code

這三種選擇器爲同一等級。htm

.root {
    background: red;
  }
  .root:hover {
    background: black;
  }
  [title] {
    background: blue;
  }
  <div class="root" title="css"></div>
複製代碼

元素、僞元素選擇器繼承

這兩種選擇器爲同一等級。
```
.div {
    background: red;
  }
  .div::selection {
    background: black;
  }
  <div>css</div>
複製代碼
```
關於選擇器的知識能夠查看CSS 選擇器一文。

權重的計算

定性來講，css 權重大小順序以下!important > 內聯樣式 > ID > 類、僞類、屬性 > 元素、僞元素 > 繼承 > 通配符，爲了方便計算，有聰明的 boy 給每一個等級定義了一個基數，即

!important: 無窮大
內聯樣式: 1000
ID: 100
類、僞類、屬性: 10
元素、僞元素: 1
通配符: 0

權重計算時，每遇到一個選擇器就加上相應的基數，總和大的認爲權重更高。以下:

style=""                    => 1000(一個行內樣式)
#title{}                    => 100(一個ID選擇器)
.root                       => 10(一個類)
[title]                     => 10(一個屬性)
div                         => 1(一個元素)
*{}                         => 0(通配符)
div span {}                 => 1+1=2(兩個元素)
div h1+span {}              => 1+1+1=2(三個元素)
div:first-child             => 1+10=11(一個元素，一個僞類)
div [title]                 => 1+10=11(一個元素，一個屬性選擇器)
body #title .root p {}      => 112(1+100+10+1，兩個元素，一個Id選擇器，一個類)
複製代碼

須要注意的是，這種計算方式只是爲了便於理解而使用的方法，它並不必定準確。

權重的基本規則

權重大的 css 生效

以下，因爲 body div 的權重(2)大於 div 的權重(1)，所以 div 的背景色爲藍色。

<style type="text/css">
    body div {
      background: blue;
    }
    div {
      height: 100px;
      width: 100px;
      background: red;
    }
  </style>
  <body>
    <div>css</div>
  </body>
複製代碼

相同的權重，後面的規則覆蓋前面的規則

以下，div 背景色紅色在藍色後，所以 div 最終爲紅色。

<style type="text/css">
    div {
      background: blue;
    }
    div {
      background: red;
      height: 100px;
      width: 100px;
    }
  </style>
  <div>css</div>
複製代碼

1. 擁有更高權重等級的 css 權重更高
也就說對於不一樣等級的選擇器，即便低等級的選擇器再多，其權重仍小於只有一個高等級選擇器的 css。例如 11 個 class 和一個 id，利用前述的計算方法 11 個 class 的權重爲 110，id 權重爲 100，class 權重值更大，可是這並不成立，這種狀況下以前的計算方法再也不適用。以下，因爲 id 比 class 高一個等級，所以，id 選擇器權重更高，div 最終爲紅色背景
```
<style type="text/css">
    .root1 .root2 .root3 .root4 .root5 .root6 .root7 .root8 .root9 .root10 .root11 {
      background: blue;
    }
    #root {
      background: red;
      height: 100px;
      width: 100px;
    }
  </style>
  <div id="root" class="root1"   class="root2" class="root3"  class="root4"  class="root5"  class="root6"  class="root7"  class="root8"  class="root9"  class="root10"  class="root11" ></div>
複製代碼
```

1. css 權重
2. css權重
3. demo56-CSS權重
4. CSS權重
5. css權重等級
6. css，權重選擇
7. css層疊權重
8. CSS權重問題
9. CSS樣式表的權重
10. css權重及計算
更多相關文章...
• Rust 所有權 - RUST 教程
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• 互聯網組織的未來：剖析GitHub員工的任性之源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。