本文详细介绍了CSS中权重的概念，包括权值计算和优先级规则。权重决定了选择器的重要程度，权值分为四个等级：内联样式、ID选择器、class|伪类|属性选择器和标签|伪元素选择器。当样式冲突时，优先级由高等级到低等级依次比较，相同优先级则后定义的样式覆盖前定义的。特别地，`!important`声明的权值被视为无限大，具有最高优先级。理解这些规则对于优化CSS和解决样式覆盖问题至关重要。
1. 权重概念：
权重，是一个相对的概念，代表了选择器之间的相对重要程度。
2. 权值概念：
权值又叫权重系数，是根据选择器之间权重大小而得到的量化的值。
3. css优先级：
css样式的优先级是由其权值决定的，权值越高其css优先级越高，但这里有个例特殊点，!important的权值可看做无限大
4.权值计算
第一等级：代表 内联样式，如 style=""，权值为 1,0,0,0；
第二等级：代表 ID选择器，如 #id="", 权值为 0,1,0,0；
第三等级：代表 calss | 伪类 | 属性 选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0；
第四等级：代表 标签 | 伪元素 选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1；
此外，通用选择器（），子选择器（>）， 相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0；
权值 = 第一等级选择器个数加第二等级选择器个数加第三等级选择器个数加第四等级选择器*个数
注意：低等级的选择器权重再高也没有高等级的选择器优先级高
总结一下，css样式优先级比较规则就是三点
1.先从高等级进行比较，高等级相同时，再比较低等级的，以此类推；
2.完全相同的话，就采用 后者优先原则（也就是样式覆盖）；
3.css属性后面加 !important 时，无条件绝对优先（比内联样式还要优先）；
扫一扫
1581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
