css选择器优先级和样式继承

CSS选择器

CSS选择器分别有:
1. 元素选择器(span,div,...)
2. 类选择器(.xx)
3. id选择器(#xx)
4. 伪元素选择器(::xx)
5. 伪类选择器(:xx)
6. 通配符选择器(*)
7. 属性选择器([xx])
8. 组合选择器(+,~>...)

关于CSS选择器的优先级

同类型,同级别的样式,后者优先(覆盖)
选择器选中的范围越窄的,优先级越高
!important > 内联样式 > id选择器 > 类选择器(/伪类选择器/属性选择器)> 标签选择器(/伪元素选择器)> 通配符选择器 > 继承样式(没有优先级,为0)

对于选择器的重叠,可以通过一个四位数来表示其选择器的权重:(规定生效的样式)
千位:若有内联样式则加1
百位:所有id选择器的数量
十位:所有类选择器,属性选择器,伪类选择器的数量
个位:所有标签选择器,伪元素选择器的数量

通过以上这个四位数,就可以分别判断其权重

如果优先级都为0,则遵循就近原则(谁描述的最近,就生效谁的样式),就近原则中都一样近的话,就再比选择器的权重优先级
如果权重优先级一样,则样式表中谁写在后面就会覆盖前面的样式

注意:!important不能提升继承样式的权重

关于样式的继承

只有color,line-xx,font-xx,text-xx等文本样式才会被继承
a标签自己有伪类,所以不会继承这些东西

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!