CSS选择器的优先级的相关介绍


css选择器的优先级

使用不同的选择器,选中同一个元素并且设样式的时候,

这样样式就会产生冲突,最终到底采用哪一个选择器定义的样式,由选择器的优先级(权重)决定,优先级高的优先显示

优先级规则(权重值)
  • 内联样式:1000
  • id选择器:100
  • 类和伪类选择器:10
  • 元素选择器:1
  • 通配选择器:0
  • 继承的样式:没有优先级

当选择器中包含多种选择器的时候,需要将我们的选择器的优先级加在一起进行计算比较,但是注意,选择器的优先级不会超过他的最大数量级,如果选择器的优先级一样,则使用靠后的样式


注意:并集选择器的优先级是单独计算


可以在样式的后面添加一个 !important,则此时该样式将会获得一个最高的优先级,将会优先于所有的样式显示甚至超过内联样式,但是在开发中尽量避免使用


样式的继承
  1. ​ 利用继承,可以将一些基本的样式设置给祖先元素,这样所有的后代将会被自动继承这些样式
  2. ​ 并不是所有的样式都会被子元素所继承,比如:背景颜色(背景相关的样式都不会被继承,边框相关的样式,定位相关的)
伪类的顺序

涉及到a的伪类一共有四个:

  • :link (L)
  • :visited (V)
  • :hover (H)
  • :active (A)

而这四个选择器的优先级是一样的,不过会有一个书写顺序(爱恨原则 LOVE HATE)

猜你喜欢

转载自blog.csdn.net/qq_42592823/article/details/114897128
今日推荐