CSS选择器是开发者用来匹配HTML文档中元素并为其应用样式的模式，不同的选择器有不同的匹配规则，而多个选择器同时作用于同一个元素时，会按照特定的优先级顺序来确定最终生效的样式。
CSS常见选择器分类
基础选择器
基础选择器是最基础的选择器类型，直接匹配元素本身或者元素的特定属性。
- 元素选择器：直接使用HTML标签名作为选择器，匹配所有该标签的元素，比如
p会匹配所有<p>标签。 - 类选择器：以英文点号开头，后面跟类名，匹配所有class属性包含该类名的元素，比如
.text-red匹配所有class包含text-red的元素。 - ID选择器：以井号开头，后面跟ID名，匹配id属性等于该值的元素，比如
#header匹配id为header的元素。 - 通配符选择器：使用星号
*，匹配文档中所有元素。 - 属性选择器：根据元素的属性及属性值来匹配元素，比如
[type="text"]匹配所有type属性为text的元素。
组合选择器
组合选择器是通过选择器之间的组合关系来匹配元素，常见的有以下几种：
- 后代选择器：使用空格分隔两个选择器，比如
div p匹配所有div内部的p元素，不管嵌套多少层。 - 子元素选择器：使用大于号分隔，比如
div > p只匹配div直接子元素的p，不包含嵌套更深的p。 - 相邻兄弟选择器：使用加号分隔，比如
h2 + p匹配紧跟在h2后面的第一个p元素。 - 通用兄弟选择器：使用波浪号分隔，比如
h2 ~ p匹配h2后面所有同级的p元素。
伪类与伪元素选择器
伪类选择器用于选择处于特定状态的元素，伪元素选择器用于选择元素的特定部分。
- 伪类选择器：比如
:hover匹配鼠标悬停的元素，:first-child匹配父元素的第一个子元素。 - 伪元素选择器：比如
::before在元素内容前插入内容，::after在元素内容后插入内容，::first-line匹配元素的第一行文本。
选择器优先级顺序规则
当多个CSS规则作用于同一个元素时，浏览器会按照优先级从高到低的顺序选择生效的样式，优先级的核心计算规则是权重叠加。
优先级权重计算方式
我们把选择器的权重分为四个等级，从左到右权重依次降低：
- 第一等级：内联样式，权重值为1000，也就是写在元素style属性里的样式。
- 第二等级：ID选择器，每个ID选择器权重值为100。
- 第三等级：类选择器、属性选择器、伪类选择器，每个这类选择器权重值为10。
- 第四等级：元素选择器、伪元素选择器，每个这类选择器权重值为1。
- 通配符选择器、继承的样式权重值为0。
计算时会把选择器中所有对应等级的选择器数量相加，得到总的权重值，权重值高的规则生效；如果权重值相同，那么后定义的规则生效。
优先级示例说明
我们可以通过下面的代码示例来理解优先级的计算：
/* 权重计算：1个ID(100) + 1个类(10) + 1个元素(1) = 111 */
#container .text p {
color: red;
}
/* 权重计算：1个ID(100) + 2个元素(2) = 102 */
#container div p {
color: blue;
}
/* 权重计算：2个类(20) + 1个元素(1) = 21 */
.box.text p {
color: green;
}如果上面的三个规则都作用于同一个p元素，那么第一个规则的权重111最高，文字会显示为红色。
优先级特殊情况
有两个特殊的规则需要注意：
- 使用
!important声明的样式会覆盖所有其他样式，不管优先级多高，但是不建议滥用，会增加样式维护难度。 - 继承的样式优先级最低，即使父元素有很高优先级的样式，子元素继承的该样式也会被自身任何直接设置的同属性样式覆盖。
实际开发注意事项
在日常开发中，为了避免优先级混乱导致的样式问题，建议遵循以下原则：
- 尽量不要使用ID选择器来写样式，因为ID的权重太高，后续很难被覆盖。
- 减少选择器的嵌套层级，嵌套越深权重越高，也越难维护。
- 避免使用
!important，如果必须使用，要添加清晰的注释说明原因。 - 同层级的样式尽量按照布局、盒模型、文本、视觉效果的的顺序书写，方便后续查找。
如果需要覆盖第三方库的样式，可以通过增加自身选择器的权重来实现，而不是随意使用!important。
CSS_selectorpriority样式优先级基础选择器组合选择器修改时间：2026-06-07 03:04:19