文章中英模式

布鲁斯前端面试题目 - CSS选择器优先级

深入理解CSS选择器优先级（Specificity）计算规则、权重比较方式，掌握类型选择器、ID选择器、行内样式等优先级差异，轻松解决样式冲突问题。

文章中英模式

懒得看文章？那就来看视频吧

什么是CSS选择器优先级？

CSS选择器优先级（Specificity）是浏览器决定哪些CSS规则应用于元素的机制。当多个规则针对同一元素的同一属性设置不同值时，具有较高优先级的选择器会覆盖较低优先级的选择器。

优先级从高到低的排序如下：

1.
!important 标记
覆盖所有其他样式，无视正常的优先级计算
2.
行内样式（Inline styles）
直接在HTML元素上使用style属性
3.
ID选择器
使用#标识符的选择器
4.
类选择器、属性选择器、伪类选择器
.class、[attr]、:hover等
5.
元素选择器、伪元素选择器
div、p、::before等
6.
源码顺序
若优先级完全相同，后出现的规则会覆盖先出现的规则

优先级判断简单示例

/* 优先级最低 */
p {
  color: black;
}

/* 比元素选择器优先级高 */
.text {
  color: blue;
}

/* 比类选择器优先级高 */
#title {
  color: green;
}

/* 比ID选择器优先级高 */
<p style="color: purple;">行内样式</p>

/* 最高优先级，覆盖一切 */
p {
  color: red !important;
}

同名选择器的优先级比较

/* 当有多个相同类型的选择器时，后出现的会覆盖先出现的 */
.button {
  background-color: blue;
}

/* 这个会覆盖上面的样式，因为它在源码中后出现 */
.button {
  background-color: green;
}

/* 但如果选择器的优先级不同，则优先级高的会胜出 */
.nav .button {
  background-color: red;  /* 这个会生效，因为它有两个类选择器 */
}

.button {
  background-color: yellow;  /* 即使后出现，也不会覆盖上面的样式 */
}

/* 同样适用于ID选择器 */
#header {
  border: 1px solid gray;
}

/* 这个会覆盖上面的边框样式 */
#header {
  border: 2px solid black;
}

/* 但具有更高优先级的选择器组合会胜出 */
body #header {
  border: 3px solid red;  /* 这个会生效，因为它有元素+ID选择器 */
}

🔥 常见面试题目

(一) 简单判断以下CSS规则是否会被覆盖

/* 规则A */
.sidebar .menu-item {
  color: blue;
}

/* 规则B */
div.sidebar ul li.menu-item {
  color: red;
}

/* 规则C */
#sidebar .menu-item {
  color: green;
}

/* 规则D */
.sidebar .menu-item:hover {
  color: yellow;
}

答：

1. 规则B会覆盖规则A，因为B有更多的选择器（3个元素选择器+1个类选择器 vs 1个类选择器）
2. 规则C会覆盖规则A和B，因为C包含ID选择器，优先级最高
3. 规则D不会直接覆盖其他规则，因为它针对的是hover状态，只在鼠标悬停时生效
4. 当元素处于hover状态时，规则D会覆盖规则A，但不会覆盖规则C（ID选择器优先级高于伪类）

(二) 判断以下选择器的优先顺序（从高到低）

a. p.content
b. p[class="content"]
c. #main p
d. body #main p.content
e. p.content.active

答：优先级从高到低排序：

d. body #main p.content - 包含ID选择器，优先级最高
c. #main p - 也包含ID选择器，但选择器总数少于d
e. p.content.active - 包含多个类选择器
a. p.content - 包含一个类选择器
b. p[class='content'] - 属性选择器与类选择器优先级相同

记住：ID选择器 > 类选择器/属性选择器/伪类 > 元素选择器/伪元素

(三) !important的使用时机、优点和缺点

答：

使用时机	优点	缺点
1. 覆盖第三方CSS库 2. 实现辅助功能 3. 印刷样式表	1. 能覆盖任何优先级 2. 解决样式冲突	1. 破坏级联特性 2. 难以维护

实际例子：

/* 第三方库的样式 */
.btn {
  background-color: blue;
}

/* 我们的覆盖样式 */
.btn.primary {
  background-color: red !important; /* 确保我们的红色按钮不被覆盖 */
}

/* 辅助功能样式 */
.high-contrast-mode .btn {
  background-color: black !important;
  color: white !important;
}

最佳实践：将!important视为最后手段，优先使用更具体的选择器解决优先级问题。