你对CSS权重真的足够了解吗？

前言

css权重不少人都听过，也了解一些，可是不少人对具体的规则或者说再深如一些关于css权重的问题，可能会不那么清楚。平常开发中，或多或少都会遇到css规则不生效的问题，为了让咱们可以减小调试css规则的时间，深入理解css权重，就十分关键了。若是喜欢的话能够点波赞/关注，支持一下，但愿你们看完本文能够有所收获。

我的博客了解一下： obkoro1.com

---

权重规则总结:

1. !important 优先级最高，但也会被权重高的important所覆盖
2. 行内样式总会覆盖外部样式表的任何样式(除了!important)
3. 单独使用一个选择器的时候，不能跨等级使css规则生效
4. 若是两个权重不一样的选择器做用在同一元素上，权重值高的css规则生效
5. 若是两个相同权重的选择器做用在同一元素上：之后面出现的选择器为最后规则.
6. 权重相同时，与元素距离近的选择器生效

---

css权重优先级用来干吗？

在同一个元素使用不一样的方式，声明了相同的一条或多条css规则，浏览器会经过权重来判断哪种方式的声明，与这个元素最为相关，从而在该元素上应用这个声明方式声明的全部css规则。

权重的五个等级及其权重

• !important;
• 行内样式;
• ID选择器, 权重:100;

• class,属性选择器和伪类选择器，权重:10;

  属性选择器指的是:根据元素的属性及属性值来选择元素，好比button的type属性等。
    伪类选择器: :active :focus等选项.

• 标签选择器和伪元素选择器，权重:1;

  伪元素选择器： :before :after

等级关系:

!important>行内样式>ID选择器 > 类选择器 | 属性选择器 | 伪类选择器 > 元素选择器

---

权重规则：

1.不推荐使用!important

不推荐使用!important，由于!important根本没有结构与上下文可言，而且不少时候权重的问题，就是由于不知道在哪里定义了一个!important而致使的。

覆盖important:

虽然咱们应该尽可能避免使用!important，但你应该知道如何覆盖important，加点权重就能够实现，codepen的demo

//!important 优先级最高，但也会被权重高的important所覆盖
    <button id="a" class="a">aaa</button>
    #a{
      background: blue  !important;  /* id的important覆盖class的important*/
    }
    .a{
      background: red  !important;
    }

2.行内样式总会覆盖外部样式表的任何样式,会被!important覆盖

3.单独使用一个选择器的时候，不能跨等级使css规则生效

不管多少个class组成的选择器，都没有一个ID选择器权重高。相似的，不管多少个元素组成的选择器，都没有一个class选择器权重高、不管多少个ID组成的选择器，都没有行内样式权重高。

codepen的demo;

在demo中使用了11个class组成一个选择器，最后仍是一个ID选择器，设置的样式生效。

能够想象在玄幻小说的那种等级制度，没有突破那个等级，就没有可比性。

因此权重是在双方处于同一等级的状况下，才开始对比。

4.若是两个权重不一样的选择器做用在同一元素上，权重值高的css规则生效

选择器可能会包含一个或者多个与权重相关的计算点，若通过权重值计算获得的权重值越大，则认为这个选择器的权重高。举一个简单的栗子:

.test #test{ } // id 100+class 10=110;
    .test #test span{} // id 100+class 10+span 1=111;
    .test #test .sonClass{} // id 100+class 10+class 10=120; //生效

5.若是两个相同权重的选择器做用在同一元素上：之后面出现的选择器为最后规则.

demo

<div id="app">
      <div class="test" id="test">
        <span >啦啦啦</span>
      </div>
    </div>
    #test span{
      color:blue;
    }
    #app span{ // 生效 由于后面出现
      color: red;
    }

6.权重相同时，与元素距离近的选择器生效

好比不一样的style表，head头部等,来看下面的栗子：

#content h1 { // css样式表中
      padding: 5px;
    }
    <style type="text/css">
      #content h1 { // html头部 由于html头部离元素更近一点，因此生效
        padding: 10px;
      }
    </style>

建议：

1. 避免使用!important;
2. 利用id增长选择器权重;
3. 减小选择器的个数（避免层层嵌套）;

---

结语

以上就是本文关于css权重的内容了，若有不对的地方欢迎指正！但愿你们看完能够有所收获，喜欢的话，赶忙点波订阅关注/喜欢。

但愿看完的朋友能够点个喜欢/关注，您的支持是对我最大的鼓励。

我的blog and 掘金我的主页，如需转载，请放上原文连接并署名。码字不易，感谢支持！本人写文章本着交流记录的心态，写的很差之处，不撕逼，可是欢迎指点。

若是喜欢本文的话，能够关注一下个人订阅号，漫漫技术路，期待将来共同窗习成长。

以上2018.5.19

参考资料：

你应该知道的一些事情——CSS权重

深刻CSS优先级

css优先级