CSS 选择器及优先级计算规则

发表于：
字数：655 阅读：≈ 2分钟 浏览：

CSS 选择器列表

选择器示例
类型选择器 ​h1 { }​
通配选择器 ​* { }​
类选择器 ​.box { }​
ID 选择器 ​#unique { }​
标签属性选择器 ​a[title] { }​
伪类选择器 ​p:first-child { }​
伪元素选择器 ​p::first-line { }​
后代选择器 ​article p​
子代选择器 ​article > p​
相邻兄弟选择器 ​h1 + p​
通用兄弟选择器 ​h1 ~ p​

CSS 优先级的计算规则

在日常开发的时候，一般采用 !import​ > inline​ > id​ > class​> tag​ 这套规则就够用了。但是遇到比较复杂的情况，比如修改一些第三方库的样式时，这样就有点力不从心。

此时可以通过计算 CSS 的权重值，对 CSS 的优先级进行准确的判断。

CSS 优先级由 A 、B、C、D 四个权重值组成，详细计算规则如下：

  • 如果存在内联样式， A = 1​​，否则 A = 0​​
  • B 的值等于 ID选择器（#id）​​ 出现的次数
  • C 的值等于 类选择器（.class）​​ 和 属性选择器（a[href="https://example.org"]）​​ 和 伪类选择器（:first-child）​​ 出现的总次数
  • D 的值等于 标签选择器（h1,a,div）​​ 和 伪元素选择器（::before,::after）​​ 出现的总次数
举例说明：
1 0 0 0 > 0 1 1 1
1 1 0 0 > 1 0 0 0
1 1 1 0 > 1 1 0 0

比较时权重值从左至右(即 A、B、C、D)依次进行比较，值更大的优先级更高，如果样式优先级相等，优先取后面出现的样式。

‍

‍

参考链接：

‍