极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。

# 简述下 css specificity

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 311 (opens new window)

css specificity 即 css 中关于选择器的权重,以下三种类型的选择器依次下降

  1. id 选择器,如 #app
  2. classattributepseudo-classes 选择器,如 .header[type="radio"]:hover
  3. type 标签选择器和伪元素选择器,如 h1p::before

其中通配符选择器 *,组合选择器 + ~ >,否定伪类选择器 :not() 对优先级无影响

另有内联样式 <div class="foo" style="color: red;"></div>!important(最高) 具有更高的权重

:not 的优先级影响 - codepen (opens new window) 可以看出 :not 对选择器的优先级无任何影响

CSS Specificity - codepen (opens new window) 可以看出十几个 class 选择器也没有一个 id 选择器权重高

Author

回答者: onemue (opens new window)

CSS 优先级中应该着重讲解 CSS 权重值计算:

更具 w3 给出的解释,我们可以讲 CSS 的权重等级分为 A、B、C 3 类,他们分别对应着 id 选择器,class 选择器、属性选择器、伪类选择器,标签选择器、伪元素选择器。

将一个选择器整体计算 ABC 分别进行求和得到一个数组(A,B ,C),数组值依次比较,选取最高的,如果都相等那么选取靠后的。

当然也有一些比较特殊的伪类选择器进行权重进行特殊的处理:

  1. 选择器:is():not():has()的优先级是选择器列表中最具有复杂性的选择器的优先级取代。

  2. 选择器:nth-child():nth-last-child()的优先级是伪类本身的优先级(计为一个伪类选择器,也就是计为 B),再加上选择器列表中最具复杂性的选择器的优先级。

  3. 选择器:where()伪类的优先级被零代替,也就是没有优先级,再优先级计算中不做数。

  4. 通用选择符以及其他选择符在优先级中不计数。

Last Updated: 6/26/2022, 10:48:10 AM