CSS权重

原文

　　简书原文：https://www.jianshu.com/p/b083556e7968

大纲

　　1、CSS层叠
　　2、CSS权重
　　3、权重等级
　　4、权重的规则
　　5、!important

1、CSS层叠

　　CSS全称：层叠样式表 (Cascading Style Sheets)，有层级的、相互叠加的样式。
　　　　1、找到所有作用于元素和属性的声明
　　　　2、一个样式是否作用于元素依赖于这个样式的权重以及样式来源的顺序
　　说明：来源的顺序：这个样式来源于行内样式、还是外部引入样式亦或者是浏览器默认的样式

2、CSS权重

　　权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。
　　当很多的规则被应用到某一个元素上时，权重是一个决定哪种规则生效，或者是优先级的过程。
　　每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。 这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中 。
　　如果两个选择器同时作用到一个元素上，权重高者生效。
　　权重的不同，是你所期望的效果，没有通过css规则在元素上生效的主要原因。
　　权重的级别根据选择器被划分为四个分类：行内样式，id，类与属性，以及元素。
　　如果两个选择器权重值相同，则最后定义的规则被计算到权重中(后面定度的CSS规则权重要更大，会取代前面的CSS规则)。
　　如果一条规则包含了更高权重的选择器，那么这个规则权重更高。
　　内联样式表含有比别的规则更高的权重。

3、权重等级

　　每个选择器在权重级别中都有自己泾渭分明的位置。根据选择器种类的不同可以分为四类，也决定了四种不同等级的权重值。
　　从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1.

4、权重的规则

　　1、相同的权重：以后面出现的选择器为最后规则：
　　　　假如在外部样式表中，同一个CSS规则你写了两次，那么出现在前面的选择器权重低，你的样式会选择后面的样式

#content h1 {
  padding: 5px;
}
#content h1 {
  padding: 10px;
}
/*
    两个选择器的权重都是0，1，0，1，最后那个规则生效。
*/

　　2、不同的权重，权重值高则生效
　　　　选择器可能会包含一个或者多个与权重相关的计算点，若经过计算得到的权重值越大，则认为这个选择器的权重高。
　　3、如果两个选择器权重值相同，则最后定义的规则被计算到权重中(后面定度的CSS规则权重要更大，会取代前面的CSS规则)

5、!important

　　!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。语法格式{ cssRule !important }。
　　应当注意的是!important是对整条样式的声明，包括这个样式的属性和属性值。
　　非到万不得已不要用!important。

参考网址

　　https://www.w3cplus.com/css/the-important-css-declaration-how-and-when-to-use-it.html

　　https://www.w3cplus.com/css/css-specificity-things-you-should-know.html