<think>我们正在回答用户关于
CSS选择器类型及其
优先级计算的问题。根据用户提供的引用内容，我们可以整理出以下信息：
1. **
CSS选择器的类型**：
- 引用[1]和[3]提到了常见的选择器类型：ID选择器、类选择器、属性选择器、伪类选择器、元素选择器、伪元素选择器、通配符选择器等。
- 引用[4]还提到
CSS3新增的选择器，如层次选择器（例如`p~ul`）、伪类选择器（`:first
-of
-type`, `:last
-of
-type`, `:only
-of
-type`, `:only
-child`, `:nth
-child(n)`, `:nth
-last
-of
-type(n)`, `:last
-child`, `:root`, `:empty`, `:enabled`, `:disabled`, `:checked`, `:not(selector)`）和属性选择器（`[attribute*=value]`, `[attribute^=value]`, `[attribute$=value]`）。
2. **
优先级计算**：
- 引用[1]和[3]详细说明了
优先级规则。
优先级由高到低排列为：
- `!important`（最高
优先级）
- 内联
样式（直接在元素的style属性中定义）
- ID选择器
- 类选择器、属性选择器、伪类选择器（三者
优先级相同）
- 元素选择器、伪元素选择器（两者
优先级相同）
- 通配符选择器、继承（
优先级最低）
- 引用[3]还给出了
优先级的计算方法：将选择器分解后，计算权重（4位数字，从左到右分别是内联
样式、ID选择器、类/属性/伪类、元素/伪元素），然后比较权重值。
因此，我们可以将回答分为两部分：选择器类型和
优先级计算。
### 选择器类型
根据引用内容，
CSS选择器可以分为以下几类：
1. **基本选择器**：
- 元素选择器（如`p`）
- 类选择器（如`.class`）
- ID选择器（如`#id`）
- 通配符选择器（如`*`）
2. **属性选择器**（如`[attribute]`, `[attribute=value]`, `[attribute*=value]`等）
3. **伪类选择器**（如`:hover`, `:first
-child`, `:nth
-child(n)`等）
4. **伪元素选择器**（如`::before`, `::after`）
5. **组合选择器**：
- 后代选择器（空格，如`div p`）
- 子元素选择器（`>`，如`div > p`）
- 相邻兄弟选择器（`+`，如`div + p`）
- 通用兄弟选择器（`~`，如`div ~ p`）
6. **
CSS3新增选择器**（如引用[4]中提到的层次选择器、新的伪类选择器等）
###
优先级计算
优先级是通过权重（specificity）来计算的，权重由4个部分（a, b, c, d）组成：
- a: 内联
样式的数量（1或0）
- b: ID选择器的数量
- c: 类选择器、属性选择器、伪类选择器的数量
- d: 元素选择器、伪元素选择器的数量
注意：通配符选择器（`*`）和继承的
样式没有权重，即0,0,0,0。
计算规则：
1. 每个选择器按上述规则计算权重，然后相加（注意：不会进位，即每个部分独立计算）。
2. 比较时从左到右依次比较a、b、c、d的值，数值大的
优先级高。
3. 如果权重相同，则后出现的
样式覆盖先出现的
样式。
4. `!important`具有最高
优先级，会覆盖所有其他声明（包括内联
样式），但应谨慎使用。
示例：
- `#header .nav li`：1个ID选择器（b=1），1个类选择器（c=1），1个元素选择器（d=1） → 权重为0,1,1,1
- `div p`：2个元素选择器（d=2） → 权重为0,0,0,2
因此，第一个选择器的
优先级更高。
另外，引用[2]中给出了一个例子：类选择器的
优先级大于元素选择器。
### 回答结构
1. 先介绍
CSS选择器的类型（分类列出）。
2. 再详细说明
优先级计算规则（包括权重计算和比较规则）。
3. 给出示例帮助理解。
注意：在回答中适当引用用户提供的引用内容（在末尾添加引用标识）。</think>###
CSS 选择器类型及
优先级计算详解
#### 一、
CSS 选择器类型
根据功能和应用场景，
CSS 选择器可分为以下 7 大类：
1. **基本选择器**
- 元素选择器：`p`, `div`
- 类选择器：`.class`
- ID 选择器：`#id`
- 通配符选择器：`*`（匹配所有元素）
2. **属性选择器**
- `[attr]`：存在属性
- `[attr=value]`：精确匹配
- `[attr^=value]`：开头匹配（
CSS3）
- `[attr$=value]`：结尾匹配（
CSS3）
- `[attr*=value]`：包含匹配（
CSS3）
3. **伪类选择器**
- 状态类：`:hover`, `:active`, `:focus`
- 结构类：`:first
-child`, `:last
-child`
- CSS3 新增：
- `:nth
-child(n)`
- `:only
-of
-type`
- `:enabled`/`:disabled`
- `:not(selector)`（反向选择）
4. **伪元素选择器**
- `::before`, `::after`
- `::first
-line`, `::first
-letter`
- `::selection`（文本选中
样式）
5. **组合选择器**
- 后代：`div p`
- 子元素：`div > p`
- 相邻兄弟：`div + p`
- 通用兄弟：`div ~ p`（
CSS3）
6. **层次选择器**（
CSS3）
- `p~ul`：选择前面有 p 的 ul
7. **特殊选择器**
- `:root`（HTML 根元素）
- `:empty`（空元素）
- `:checked`（选中表单元素）[^4]
#### 二、
优先级计算规则
优先级由 **权重累加值** 决定，权重分为 4 个等级（从高到低）：
| 选择器类型 | 权重值 | 示例 |
|
--------------------------|
--------|
----------------|
| 1. `!important` | ∞ | `color: red !important;` |
| 2. 内联
样式 | 1,0,0,0| `<p style="...">` |
| 3. ID 选择器 | 0,1,0,0| `#header` |
| 4. 类/属性/伪类选择器 | 0,0,1,0| `.btn`, `[type="text"]`, `:hover` |
| 5. 元素/伪元素选择器 | 0,0,0,1| `div`, `::before` |
| 6. 通配符/继承 | 0,0,0,0| `*`, 继承的
样式 |
**计算步骤**：
1. 将选择器拆分为独立组件
2. 按权重等级累加每个组件的值
3. **从左到右** 逐级比较权重值（无进位机制）
4. 权重相同时，后定义的
样式生效[^1][^3]
#### 三、
优先级计算示例
```
css
/* 权重: 0,1,0,1 (ID + 元素) */
#nav li { color: blue; }
/* 权重: 0,0,2,1 (类×2 + 元素) */
.menu .item { color: red; } /* 生效（0,0,2,1 > 0,1,0,1） */
/* 权重: 0,0,1,0 (伪类) */
a:hover { text
-decoration: underline; }
```
> 💡 **关键规则**：
>
- 1 个 ID 选择器 > 100 个类选择器（因比较机制是逐级判断）
>
- `!important` 可覆盖所有规则（慎用）
>
- 内联
样式优先级高于外部
样式表[^3]
#### 四、
CSS3 新增选择器
优先级
新增选择器按基础类型归类计算：
- 层次选择器 `p~ul` → 元素选择器（0,0,0,2）
- 属性选择器 `[href^="https"]` → 属性选择器（0,0,1,0）
- 伪类 `:nth
-child(2)` → 伪类选择器（0,0,1,0）[^4]
>
优先级本质是 **选择器特异性（Specificity）** 的量化体现，理解权重计算可避免过度依赖 `!important`[^1][^3]。
扫一扫
3816
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
