CSS高级选择器能够在不增加额外HTML类名的前提下，精准匹配目标元素并应用样式，大幅减少CSS代码的冗余度，提升样式的可维护性。掌握这些选择器的应用技巧，能让前端开发效率得到明显提升。
一、属性选择器的应用技巧
属性选择器通过元素的属性及属性值来匹配元素，适合处理带有特定属性的标签，比如表单元素、自定义属性元素等。
1. 基础属性匹配
可以直接匹配带有某个属性的元素，也可以匹配属性值等于特定内容的元素。
/* 匹配所有带有disabled属性的input元素 */
input[disabled] {
cursor: not-allowed;
background-color: #f5f5f5;
}
/* 匹配type属性值为text的input元素 */
input[type="text"] {
border: 1px solid #ccc;
padding: 8px;
}
2. 属性值模糊匹配
属性选择器支持多种模糊匹配规则，满足不同的匹配需求：
^=：匹配属性值以指定字符串开头的元素$=：匹配属性值以指定字符串结尾的元素*=：匹配属性值包含指定字符串的元素
/* 匹配href属性以https开头的a标签 */
a[href^="https"] {
color: #1890ff;
}
/* 匹配src属性以.png结尾的img标签 */
img[src$=".png"] {
border: 1px solid #eee;
}
/* 匹配class属性包含card字符串的元素 */
[class*="card"] {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
二、伪类选择器的应用技巧
伪类选择器用于选择处于特定状态的元素，不需要在HTML中添加额外的状态类名，常见的伪类可以分为结构伪类和状态伪类两类。
1. 结构伪类选择器
结构伪类根据元素在DOM树中的位置来匹配，适合处理列表、表格等结构化内容的样式。
/* 匹配ul下的第一个li元素 */
ul li:first-child {
font-weight: bold;
}
/* 匹配ul下的最后一个li元素 */
ul li:last-child {
border-bottom: none;
}
/* 匹配偶数位置的tr元素，实现表格斑马纹 */
tr:nth-child(even) {
background-color: #fafafa;
}
/* 匹配奇数位置的tr元素 */
tr:nth-child(odd) {
background-color: #fff;
}
/* 匹配第3到第5个li元素 */
li:nth-child(n+3):nth-child(-n+5) {
color: #f5222d;
}
2. 状态伪类选择器
状态伪类匹配处于交互状态的元素，比如鼠标悬停、输入框聚焦、复选框选中状态等。
/* 鼠标悬停在按钮上的样式 */
button:hover {
opacity: 0.8;
transform: translateY(-2px);
}
/* 输入框聚焦时的样式 */
input:focus {
border-color: #1890ff;
outline: none;
box-shadow: 0 0 0 2px rgba(24,144,255,0.2);
}
/* 复选框选中时的样式 */
input[type="checkbox"]:checked + span {
color: #1890ff;
}
/* 输入框为空时的提示样式 */
input:placeholder-shown {
background-color: #fffbe6;
}
三、伪元素选择器的应用技巧
伪元素选择器用于选择元素的特定部分，或者创建不在DOM树中的虚拟元素，常见的是::before和::after。
1. 内容插入
可以通过content属性在元素前后插入文本或图标内容。
/* 在外部链接后面添加图标标识 */
a[target="_blank"]::after {
content: "↗";
margin-left: 4px;
font-size: 12px;
}
/* 在引用块前面添加引号 */
blockquote::before {
content: "“";
font-size: 24px;
color: #999;
margin-right: 4px;
}
blockquote::after {
content: "”";
font-size: 24px;
color: #999;
margin-left: 4px;
}
2. 装饰性元素创建
伪元素可以创建不需要额外HTML标签的装饰元素，减少DOM节点数量。
/* 为卡片添加左上角的装饰角标 */
.card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-top: 20px solid #f5222d;
border-right: 20px solid transparent;
}
/* 清除浮动 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
四、选择器优先级与组合技巧
使用高级选择器时需要注意优先级计算，避免样式冲突。优先级规则为：内联样式（1000）> ID选择器（100）> 类、伪类、属性选择器（10）> 元素、伪元素选择器（1）。
可以通过组合选择器实现更精准的匹配，比如将属性选择器和伪类选择器组合：
/* 匹配type为text且聚焦的input元素 */
input[type="text"]:focus {
border-color: #52c41a;
}
/* 匹配ul下第偶数个且带有active类的li元素 */
ul li:nth-child(even).active {
background-color: #e6f7ff;
}
合理使用CSS高级选择器，可以减少HTML中的冗余类名，让样式逻辑更清晰，同时提升CSS代码的复用性和可维护性，是前端开发者需要掌握的核心技能之一。
CSS_selector伪类选择器伪元素选择器属性选择器修改时间：2026-07-17 19:48:40