简述CSS3选择器优先级及计算?
CSS的选择器优先级是一个相对复杂的概念,它规定了在一组样式冲突时,哪些样式将被浏览器采纳。选择器优先级是通过一个四位的值来计算的,形式为:[内联样式, ID选择器, 类选择器/属性选择器/伪类, 元素选择器/伪元素]。这四个等级的优先级从左到右递减,左边的优先级最高,右边的优先级最低。
- 内联样式:直接在HTML元素中的”style”属性里定义的样式,优先级最高,记为1000。
- ID选择器:通过元素的id选择元素,记为0100。
- 类选择器、属性选择器、伪类:通过元素的class、属性或者伪类选择元素,记为0010。
- 伪元素、元素选择器:通过元素名称或者伪元素选择元素,记为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
规则的优先级最高,它可以覆盖所有其他的样式,但是过度使用可能会导致代码难以维护,所以一般情况下我们应尽量避免使用。