<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]。