css中选择器权重问题

css中选择器的权重问题

今天实现一个简单的选项卡的时候发现一个问题，当我想给一个盒子添加一个样式类，覆盖之前的样式的时候，发现添加的样式类不起作用，后来才发现是选择器权重的问题

选择器的权重计算

1.!important : 比其他设置都大
2.内联样式：权值为1000
3.ID选择器：权值为0100
4.类、伪类和属性选择器：权值为0010
5.标签选择器：权值为0001
6.通配符、子选择器、相邻选择器等：权值为0000
7.继承的样式没有权值

！important 和内联样式属于蛮不讲理的那种，只要他们在，优先级是最高的。他俩中，!important比内联高

权重值之间是可以相加的

#box1 .box span{
           font-size: 14px;
       }

这里的span的权值=id选择器100+类选择器10+标签选择器1= 111

权值相同的时候，后面的选择器会覆盖前面的样式

权值不同的时候，权值高的选择器生效