CSS权重

场景

为什么我在这里设置的css样式不起作用？
可能你在某处定义了一个更高权重的规则，导致此处规则不生效。

什么是权重

实际上它就是CSS的优先级啊，它决定了你css规则怎样被浏览器解析直到生效。

• 权重还是可以叠加的，比如说：

权重的级别根据选择器被划分为四个分类：行内样式，id，类与属性，以及元素.
我们经常会写

.test div{…}
这个的权重就会叠加。

• 权重的选择和定义的顺序有关

如果两个选择器权重值相同，则最后定义的规则被计算到权重中(后面定度的CSS规则权重要更大，会取代前面的CSS规则)

优先级

行内样式>id>类与属性>元素
当然我们也见过这样的

.a{color:red !importent;}

!important 用于单独指定某条样式中的单个属性。
对于被指定的属性，有 !important 指定的权重值大于所有未用 !important 指定的规则。

但是我们一般是不会使用的，因为这样的写法会对项目交接有很大的阻碍。

下面来说一下元素

元素跟伪元素选择器：
伪元素选择器只包含以下几种:
::after
::before
::first-letter
::first-line
::selecton
伪元素跟伪类都是选择器的补充
伪类表示的是一种“状态”：比如hover，active等等；
伪元素表示文档的某个确定部分的表现：比如::first-line 伪元素只作用于你前面元素选择器确定的一个元素的第一行。

如何确定权重

权重记忆口诀。

从0开始，
一个行内样式+1000，
一个id+100，
一个属性选择器/class或者伪类+10，
一个元素名，或者伪元素+1.

权重.png

参考

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