css优先级规则
CSS 优先规则1: 最近的祖先样式比其他祖先样式优先级高。
CSS 优先规则2:"直接样式"比"祖先样式"优先级高。
CSS 优先规则3: 优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
CSS 优先规则4: 计算选择符中 ID 选择器的个数(a),计算选择符中类选择器、属性选择器以及伪类选择器的个数之和(b),计算选择符中标签选择器和伪元素选择器的个数之和(c)。按 a、b、c 的顺序依次比较大小,大的则优先级高,相等则比较下一个。若最后两个的选择符中 a、b、c 都相等,则按照"就近原则"来判断。
规则四,我们可以这样想:
首先,CSS的优先级是根据样式声明的特殊性值来判断的。
根据规则三可以把特殊性分为四个等级:如下:

标签内选择符x,0,0,0
ID选择符0,x,0,0
class选择符/属性选择符/伪类选择符 0,0,x,0
元素标签和伪元素选择符0,0,0,x
每个选择器初始值都为0 0 0 0 ,根据规则四,进行相应的加1,判断优先级时,从左向右判断,若两个优先级相等,则后出现的优先级大。
出现!important的权重最大。可以认为是1 0 0 0 0
eg:
这个优先级为 0 1 0 1

#con-id span {
    color: red;
}

答:

**判断选择器优先级时,先判断样式声明后面是否由 !important,有的话,权重最大;
说明
当在一个样式声明中使用一个 !important 规则时,此声明将覆盖任何其他声明。虽然技术上 !important 与优先级无关,但 !important 却又与 CSS 优先级直接相关。
破坏级联规则
使用 !important 是一个坏习惯,应该尽量避免,因为这破坏了样式表中的固有的级联规则 使得调试找 bug 变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用。

然后,判断优先级时,多个选择器综合权重来判断优先级:我们可以把选择器的优先级分为四个等级,
第一个等级:行内样式,为1000
第二个等级:id选择器,为0100
第三个等级:类选择器、伪类选择器、属性选择器,为0100
第四个等级:标签选择器和伪元素选择器,为0001
分割符=============================================
规则中出现的每一个选择器,会根据他们的特殊性进行叠加。判断优先级时,从左向右判断,数字大的优先级大。**

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐