高级前端
css
【Q309】简述下 css specificity

简述下 css specificity

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

Author 回答者: shfshanyue (opens in a new tab)

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 in a new tab) 可以看出 :not 对选择器的优先级无任何影响

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