前端小知识：CSS 选择器优先级

面试被问烂了的一道题，但很多人依然会答错：CSS 选择器的优先级到底怎么算？

优先级权重

简单记：内联样式 > id 选择器 > 类/属性/伪类 > 元素/伪元素。

计算规则可以看成一个三位数（不算内联样式）：

选择器权重
#app1,0,0
.box / [type=text] / :hover0,1,0
div / ::before0,0,1

一个例子

1
2
3
#content .box { color: red; }      /* 1,1,0 */
.box .item { color: blue; }        /* 0,2,0 */
div.box.item { color: green; }     /* 0,2,1 */

第一条 1,1,0 权重最高，所以 .box 的文字最终是红色。

容易忽略的细节

  • !important：优先级最高的不是选择器，而是它。多个 !important 之间再按选择器权重比较。
  • 就近原则：权重相同时，后写的样式覆盖先写的。
  • 通配符 * 权重为 0，但依然比”无样式”优先级高。

判断优先级时先别急着数，先看有没有 !important 和内联样式，再看 id 数量，最后才轮到类。

前端的路还很长，把基础打扎实最重要。