CSS选择器的权重和计算规则(机制)
从CSS代码存放位置看权重优先级: 内嵌样式 > 内部样式表 > 外联样式表。 从样式选择器看权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 继承 > 通配符。 CSS权重是由四个数值决定: 第一等:代表内联样式,如: style=””,权值为1000。 第二等:代表ID选择器,如:#content,权值为100。 第三等:代表类、伪类和属性选择器,如.content,:hover,[type="text"],权值为10。 第四等:代表标签选择器和伪元素选择器,如div p,::before,权值为1。 通配选择符 (universal selector)( * ) 关系选择符 (combinators)( + , > , ~ , ' ' , || )和 否定伪类 (negation pseudo-class)( :not() )对优先级没有影响(但是,在 :not() 内部声明的选择器会影响优先级)。 最后把这些值加起来,再就是当前元素的权重了。 权重算出来了,但是某个元素到底用哪个样式,还有3个规则: 1,如果样式上加有!important标记,那么始终采用这个标记的样式; 2、匹配的内容按照CSS权重排序,权重大的优先; 3,如果权重也一样,按照它在CSS样式表里声明的顺序,后声明的优先。 来源: CSDN