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员工的任性之源