css 鲜为人知的权重问题

各位前端开发的小伙伴相比对css肯定都不陌生，现如今也有 less 和 sass 两大css预编译语言在开发中大方光彩。

回顾到当初拿纯css编写样式的时候，样式冲突、样式被覆盖 等等一些列问题也被困扰了很久。

后来通过命名自己独立开发的模块下用自己id命名的方式解决了样式冲突问题，

#自己的id名  .class名 .class名{
    //具体样式内容
}

但随之而来的就是样式各种被覆盖掉，不管你想要的，还是不想要的，经常会有一些奇怪的问题产生，后来有时候被迫 在样式表后面加上 !important

但老是一味的用 !important 也不是个办法，用在同一段样式表中还是会有问题，于是乎与了解css选择器。

css选择器

通配符选择器 *

标签 | 伪元素

属性选择器

类选择器 classs

id选择器

行内样式

!important

大家都知道 !important 的优先级是最大的， 然后Id选择器 比 class选择器 要大 ， 行内style样式有高于id 和 class， 以上内容都大于 属性选择器 ，又都大于通配符选择器。

但看下面这段代码

#id div .box .box_item a p {
    color:red;
}
​
#id  .out_box .box .box_item p {
    color: green;
}

这个情况下，姑且不谈先后执行渲染的情况，文字到底是 红色还是绿色， 心里多少会有点犯嘀咕

此情此景，传统记忆的 css选择器权重链就有些不好用了，如果觉得这样可以勉强靠经验算出来，那么再加上行间样式，再加上伪类伪元素呢 ┓(;´_｀)┏

我直接开始摔杯子了！！！

权重数值

这时候我告诉你 选择器的权重是有具体的值的，可以通过这个值相加，最后看谁的权重值更大，来判断。

选择器	权重值
！important	Infinity
行间样式	1000
ID	100
class | 属性 | 伪类	10
标签 | 伪元素	1
通配符	0

经过计算

#id div .box .box_item a p {  //123
    color:red;
}
​
#id  .out_box .box .box_item p {  //131
    color: green;
}

所以最后的p标签显示的会是 绿色

256进制 ！！！

注意：上面算出的具体权重的数值是错误的，实际上，权重的值不是十进制的，而是 256进制的

所以上面简单的用十进制相加是不严谨的！！！

所以通常我们在样式表开头写*也变得合理

*{
    margin:0;
    padding:0;
}