css选择器的核心分类与基础用法
css选择器用于匹配页面中的HTML元素，从而将对应的样式规则应用到这些元素上。不同类型的选择器匹配逻辑不同，适用场景也有明显区别，下面先介绍最基础的三类选择器。
元素选择器
元素选择器直接通过HTML标签名称匹配元素，会选中页面中所有该标签的元素，适合给某一类标签设置统一样式。
/* 选中所有p标签，设置字体大小为14px */
p {
font-size: 14px;
}
/* 选中所有div标签，设置内边距为10px */
div {
padding: 10px;
}
id选择器
id选择器通过元素的id属性匹配元素，id在页面中是唯一的，因此该选择器只会选中一个特定元素，优先级较高，适合给页面中唯一的元素设置样式。
/* 选中id为header的元素，设置背景色为灰色 */
#header {
background-color: #f5f5f5;
}
<div id="header">页面头部</div>
类选择器
类选择器通过元素的class属性匹配元素，一个class可以对应多个元素，一个元素也可以有多个class，复用性很强，是日常开发中最常用的选择器类型。
/* 选中所有class包含active的元素，设置文字颜色为蓝色 */
.active {
color: #1890ff;
}
/* 选中class同时包含btn和primary的元素 */
.btn.primary {
background-color: #1890ff;
color: #fff;
}
<span class="active">当前选中项</span> <button class="btn primary">主要按钮</button>
进阶选择器类型
属性选择器
属性选择器通过元素的属性或属性值来匹配元素，适合根据元素的属性特征选择元素，比如根据输入框的类型、链接的地址特征等选择。
/* 选中所有type为text的input元素 */
input[type="text"] {
border: 1px solid #ddd;
}
/* 选中href属性以https开头的a元素 */
a[href^="https"] {
color: #52c41a;
}
/* 选中class属性包含card字符串的元素 */
[class*="card"] {
border-radius: 4px;
}
伪类选择器
伪类选择器用于选择处于特定状态的元素，比如鼠标悬停、元素被选中、子元素的位置等，不需要在HTML中添加额外的class就能实现状态样式控制。
/* 鼠标悬停在按钮上时改变背景色 */
.btn:hover {
background-color: #40a9ff;
}
/* 选中ul下的第一个li子元素 */
ul li:first-child {
font-weight: bold;
}
/* 选中输入框被聚焦时的状态 */
input:focus {
outline: 2px solid #1890ff;
}
伪元素选择器
伪元素选择器用于选择元素的特定部分，或者给元素前后插入内容，常见的伪元素有::before、::after、::first-line等。
/* 给所有p标签的第一行设置特殊样式 */
p::first-line {
font-weight: bold;
}
/* 给class为tip的元素前面插入提示图标 */
.tip::before {
content: "!";
display: inline-block;
width: 16px;
height: 16px;
background-color: #faad14;
border-radius: 50%;
text-align: center;
margin-right: 4px;
color: #fff;
}
组合选择器与优先级
常见组合选择器
可以将多个基础选择器组合起来，实现更精准的元素匹配，常见的组合方式如下：
- 后代选择器：用空格分隔，选中某元素内部的所有后代元素，比如
div p选中div内部所有p元素 - 子元素选择器：用>分隔，只选中某元素的直接子元素，比如
ul>li只选中ul的直接子li，不包含嵌套在li里的ul中的li - 相邻兄弟选择器：用+分隔，选中某元素后面紧邻的第一个兄弟元素，比如
h2+p选中h2后面紧邻的p元素 - 通用兄弟选择器：用~分隔，选中某元素后面的所有兄弟元素，比如
h2~p选中h2后面所有的p兄弟元素
/* 后代选择器示例 */
.container p {
line-height: 1.5;
}
/* 子元素选择器示例 */
.nav>li {
display: inline-block;
margin-right: 10px;
}
选择器优先级规则
当多个选择器匹配到同一个元素，并且设置了冲突的样式时，会按照优先级规则决定最终生效的样式，优先级从高到低依次为：
| 选择器类型 | 优先级权重 |
|---|---|
| 内联样式（style属性） | 1000 |
| id选择器 | 100 |
| 类选择器、属性选择器、伪类选择器 | 10 |
| 元素选择器、伪元素选择器 | 1 |
| 通配符选择器（*） | 0 |
如果优先级相同，则后面的样式会覆盖前面的样式。实际开发中不建议过度使用id选择器，避免优先级过高导致样式难以覆盖，尽量通过类选择器和合理的组合选择器实现样式控制。
css_selectorid_selectorclass_selectorpseudo_class_selectorattribute_selector修改时间：2026-07-07 16:15:28