简述CSS3选择器优先级及计算?

CSS的选择器优先级是一个相对复杂的概念,它规定了在一组样式冲突时,哪些样式将被浏览器采纳。选择器优先级是通过一个四位的值来计算的,形式为:[内联样式, ID选择器, 类选择器/属性选择器/伪类, 元素选择器/伪元素]。这四个等级的优先级从左到右递减,左边的优先级最高,右边的优先级最低。

  1. 内联样式:直接在HTML元素中的”style”属性里定义的样式,优先级最高,记为1000。
  2. ID选择器:通过元素的id选择元素,记为0100。
  3. 类选择器、属性选择器、伪类:通过元素的class、属性或者伪类选择元素,记为0010。
  4. 伪元素、元素选择器:通过元素名称或者伪元素选择元素,记为0001。

比如:

  • h1 { color: red; } // 优先级为0001
  • .class { color: blue; } // 优先级为0010
  • #id { color: green; } // 优先级为0100
  • < p style=”color: yellow;”> // 优先级为1000

如果一个选择器同时包含多个部分,那么优先级就是这些部分的和。比如:#id .class h1 { color: black; } 的优先级为0111 (0100 + 0010 + 0001)。

在实际应用中,如果我们想要覆盖掉某些已经定义好的样式,就需要利用这个优先级规则,通过增加选择器的优先级来实现。

需要注意的是,!important规则的优先级最高,它可以覆盖所有其他的样式,但是过度使用可能会导致代码难以维护,所以一般情况下我们应尽量避免使用。

发表评论

后才能评论