选择器的权重
样式的冲突
当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时就发生了样式的冲突
选择器的权重(优先级)
!important 最高优先级(慎用)
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式 没有优先级(最低)
注:
a)比较优先级时,需要将所有的选择器的优先级进行相加计算,最后优先级越高,则越优先显示(分组选择器是单独计算的)
(叠加原则)
b)选择器的累加不会超过其最大的数量级(例如类选择器再高也不会超过id选择器)
c)如果优先级计算后相同,此时则优先使用靠下的样式(就近原则)
d)在某一个样式的后边添加 !important,则此时该样式会获取到最高的优先级,甚至超过内联样式(开发时慎用)
CSS选择器遵循
a)在相同级别:1、叠加原则 2、就近原则
b)id选择器> 类选择器 > 标签选择器
c)范围越小,优先级别越高