前端八股CSS---CSS选择器和优先级

类型	写法	示例	权重
通配符	`*`	`* { margin: 0 }`	0,0,0,0
元素选择器	`div` `p` `span`	`div { color: red }`	0,0,0,1
类选择器	`.class`	`.box { color: red }`	0,0,1,0
ID 选择器	`#id`	`#header { color: red }`	0,1,0,0

2. 属性选择器

写法	说明	示例	权重
`[attr]`	存在指定属性	`[disabled]`	0,0,1,0
`[attr=value]`	完全匹配	`[type="text"]`	0,0,1,0
`[attr^=value]`	以 value 开头	`[href^="https"]`	0,0,1,0
`[attr$=value]`	以 value 结尾	`[src$=".jpg"]`	0,0,1,0
`[attr*=value]`	包含 value	`[class*="btn"]`	0,0,1,0

3. 伪类选择器

写法	说明	示例	权重
`:hover`	鼠标悬停	`a:hover`	0,0,1,0
`:active`	激活状态	`button:active`	0,0,1,0
`:focus`	聚焦状态	`input:focus`	0,0,1,0
`:first-child`	第一个子元素	`li:first-child`	0,0,1,0
`:last-child`	最后一个子元素	`li:last-child`	0,0,1,0
`:nth-child(n)`	第 n 个子元素	`li:nth-child(2)`	0,0,1,0
`:not()`	排除	`div:not(.box)`	0,0,1,0

4. 伪元素选择器

写法	说明	示例	权重
`::before`	前插入内容	`.box::before`	0,0,0,1
`::after`	后插入内容	`.box::after`	0,0,0,1
`::first-line`	第一行	`p::first-line`	0,0,0,1
`::first-letter`	第一个字母	`p::first-letter`	0,0,0,1
`::placeholder`	占位符	`input::placeholder`	0,0,0,1

5. 组合选择器

写法	说明	示例	权重
后代选择器	空格	`.box p`	相加
子选择器	`>`	`.box > p`	相加
相邻兄弟	`+`	`div + p`	相加
全体兄弟	`~`	`div ~ p`	相加
分组选择器	`,`	`div, p, span`	各自独立

二、优先级权重计算

权重规则（四位数）

复制代码

(行内样式, ID数, 类/属性/伪类数, 元素/伪元素数)

示例：
- 通配符 *                 → (0,0,0,0)
- div                     → (0,0,0,1)
- .box                    → (0,0,1,0)
- #header                 → (0,1,0,0)
- style="color:red"       → (1,0,0,0)
- !important              → 最高，无敌

权重计算示例

css 复制代码

/* 权重：(0,0,0,1) */
div { color: red; }

/* 权重：(0,0,1,0) */
.box { color: blue; }

/* 权重：(0,0,1,1) */
div.box { color: green; }

/* 权重：(0,1,0,0) */
#header { color: yellow; }

/* 权重：(0,1,0,1) */
div#header { color: purple; }

/* 权重：(0,1,1,0) */
#header .title { color: pink; }

/* 权重：(0,0,2,0) */
.box.title { color: orange; }

三、优先级排序（从高到低）

复制代码

1. !important（最高，核武器级别）
   ↓
2. 行内样式（style="..."）
   ↓
3. ID 选择器（#id）
   ↓
4. 类选择器 / 属性选择器 / 伪类（.class / [attr] / :hover）
   ↓
5. 元素选择器 / 伪元素（div / ::before）
   ↓
6. 通配符（*）
   ↓
7. 继承样式（最低，比 0 还低）

四、特别注意（高频考点）

1. !important 权重最高，慎用！

css 复制代码

.box {
  color: red !important;  /* 无敌，但别乱用 */
}

/* 除非特殊情况，否则无法覆盖 */

慎用原因：

破坏样式层叠规则
后续维护困难
无法通过正常权重覆盖

2. 继承样式权重最低

css 复制代码

/* 父元素设置 */
.parent {
  color: red;
}

/* 子元素继承来的颜色，权重比通配符还低 */
.child {
  /* 继承来的 color: red，权重极低 */
}

/* 通配符都能覆盖继承样式 */
* {
  color: blue;  /* 会覆盖继承的红色 */
}

3. 权重不会进位！

css 复制代码

/* 100 个类选择器 < 1 个 ID 选择器 */
/* (0,0,100,0) < (0,1,0,0) */

.class1.class2.class3...（100个） {  /* 权重 (0,0,100,0) */
  color: red;
}

#id {  /* 权重 (0,1,0,0) */
  color: blue;  /* 生效！因为 ID 权重更高 */
}

4. 相同权重，后面覆盖前面

css 复制代码

/* 权重相同 */
.box { color: red; }
.box { color: blue; }  /* 后者生效 */

/* 权重相同，与文件引入顺序有关 */
<link rel="stylesheet" href="a.css">  /* a.css 中的样式 */
<link rel="stylesheet" href="b.css">  /* b.css 中相同权重会覆盖 a.css */

五、完整示例

css 复制代码

<style>
  /* 权重：(0,0,0,1) */
  div { color: gray; }
  
  /* 权重：(0,0,1,0) - 覆盖上面 */
  .box { color: blue; }
  
  /* 权重：(0,1,0,0) - 覆盖上面 */
  #container { color: red; }
  
  /* 权重：(0,0,1,1) - 比 #container 低 */
  div.box { color: green; }  /* 不生效，因为 ID 权重更高 */
  
  /* !important - 最高 */
  .special { color: orange !important; }  /* 生效！ */
</style>

<div id="container" class="box special">
  这段文字是什么颜色？
  <!-- 答案：orange（!important 最高） -->
</div>

六、面试高频问题

Q：CSS 优先级是如何计算的？

答：

CSS 优先级用四位数表示：(行内样式, ID数, 类/属性/伪类数, 元素/伪元素数)

行内样式：1,0,0,0

ID 选择器：0,1,0,0

类/属性/伪类：0,0,1,0

元素/伪元素：0,0,0,1

通配符：0,0,0,0

比较时从左到右，谁大谁优先。权重不会进位。

Q：!important 应该什么时候用？

答：

尽量不用。只有在需要覆盖第三方库样式、或者紧急修复时使用。滥用会导致样式难以维护。

Q：100 个类选择器和 1 个 ID 选择器谁优先级高？

答：

ID 选择器优先级高。因为权重不会进位，(0,1,0,0) > (0,0,100,0)。