在前端开发中，CSS选择器是实现元素样式控制的核心工具，不同的选择器对应不同的元素匹配规则，掌握这些规则才能精准选中目标元素。无论是给单个按钮设置样式，还是批量调整列表项的显示效果，都需要依赖合适的选择器完成。
基础CSS选择器类型
基础选择器是最常用的选择器类型，适合匹配单一特征的元素，常见的有以下几种：
1. 元素选择器
直接使用HTML元素名称作为选择器，会匹配页面中所有该类型的元素。比如使用p选择器会选中所有段落元素。
/* 选中所有p元素，设置文字颜色为灰色 */
p {
color: #666;
}
2. ID选择器
通过元素的id属性匹配元素，ID在页面中具有唯一性，所以ID选择器只会选中一个特定元素，语法是在ID名前加#。
/* 选中id为header的元素，设置背景色为蓝色 */
#header {
background-color: #2c3e50;
}
3. 类选择器
通过元素的class属性匹配元素，一个类可以对应多个元素，语法是在类名前加.。
/* 选中所有class为btn的元素，设置内边距 */
.btn {
padding: 8px 16px;
}
4. 通配符选择器
使用*作为选择器，会匹配页面中所有元素，通常用来做全局样式初始化。
/* 清除所有元素的内外边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
组合选择器用法
当需要根据元素的位置关系或者层级关系选中元素时，就需要使用组合选择器，常见的组合规则如下：
- 后代选择器：使用空格分隔两个选择器，选中前一个元素内部的所有后一个元素，无论嵌套多少层。
- 子元素选择器：使用
>分隔两个选择器，只选中前一个元素的直接子元素。 - 相邻兄弟选择器：使用
+分隔两个选择器，选中前一个元素后面紧邻的第一个同层级元素。 - 通用兄弟选择器：使用
~分隔两个选择器，选中前一个元素后面所有同层级元素。
/* 后代选择器：选中ul内部所有li元素 */
ul li {
list-style: none;
}
/* 子元素选择器：只选中class为nav的直接子元素a */
.nav > a {
text-decoration: none;
}
/* 相邻兄弟选择器：选中h2后面紧邻的第一个p元素 */
h2 + p {
font-size: 14px;
}
/* 通用兄弟选择器：选中h2后面所有p元素 */
h2 ~ p {
line-height: 1.6;
}
伪类与伪元素选择器
伪类和伪元素选择器可以选中元素的特定状态或者生成虚拟元素，进一步丰富元素选择场景。
常用伪类选择器
伪类用来选择元素的特定状态，比如鼠标悬停、元素被点击、元素在父容器中的位置等。
/* 鼠标悬停在按钮上时改变背景色 */
.btn:hover {
background-color: #3498db;
}
/* 选中无序列表的第一个li元素 */
ul li:first-child {
font-weight: bold;
}
/* 选中输入框获得焦点时的状态 */
input:focus {
border-color: #2ecc71;
outline: none;
}
常用伪元素选择器
伪元素用来创建不在DOM树中的虚拟元素，或者选中元素的特定部分，比如首行文字、元素前后内容等。
/* 在p元素内容前添加前缀文字 */
p::before {
content: "提示：";
color: #e74c3c;
}
/* 选中p元素的第一行文字 */
p::first-line {
font-size: 18px;
}
实用选择技巧
在实际开发中，可以结合多种选择器规则，更精准地选中目标元素：
- 如果要选中同时包含多个类的元素，可以把类选择器连写，比如
.btn.primary选中同时有btn和primary类的元素。 - 如果要选中属性符合条件的元素，可以使用属性选择器，比如
input[type="text"]选中所有文本输入框。 - 如果要排除某些元素，可以结合
:not()伪类，比如li:not(.disabled)选中所有不包含disabled类的li元素。
/* 选中同时有btn和primary类的元素 */
.btn.primary {
background-color: #2ecc71;
color: white;
}
/* 选中type为text的input元素 */
input[type="text"] {
border: 1px solid #ddd;
height: 32px;
padding: 0 8px;
}
/* 选中所有li元素，排除class为disabled的 */
li:not(.disabled) {
cursor: pointer;
}
注意：选择器的优先级会影响样式的最终生效效果，优先级从高到低大致为：内联样式 > ID选择器 > 类选择器/伪类选择器/属性选择器 > 元素选择器/伪元素选择器 > 通配符选择器。如果样式没有生效，可以检查是否存在优先级冲突的问题。
CSS_selector前端开发网页样式元素定位修改时间：2026-07-10 20:33:25