复合选择器
复合选择器的定义
在CSS中，选择器可以分为基础选择器和复合选择器。复合选择器是建立在基础选择器之上，通过组合基础选择器形成的更强大的选择器。
- 复合选择器可以更精确、高效地选择目标元素
- 由两个或多个基础选择器通过不同方式组合而成
- 常用类型包括：后代选择器、子选择器、并集选择器、伪类选择器等
提示
复合选择器的组合方式决定了它们的选择范围和优先级，理解每种组合方式的差异很重要。
属性选择器
属性选择器可以根据元素的属性值来匹配元素，是CSS3新增的强大选择器。
基本语法
css
选择器[属性名="属性值"] {
属性1: 属性值1;
}示例
css
/* 选择type为text的input元素 */
input[type="text"] {
border: 1px solid red;
}
/* 选择class为v1且xx属性为456的元素 */
.v1[xx="456"] {
color: gold;
}警告
属性选择器对大小写敏感，[type="text"]和[type="TEXT"]会选择不同的元素。
后代选择器
后代选择器（包含选择器）用于选择嵌套在父元素内的子元素。
语法
css
元素1 元素2 { 样式声明 }特点
- 用空格分隔父元素和后代元素
- 选择的是元素1内的所有元素2（不限嵌套层级）
- 元素1和元素2可以是任意基础选择器（标签、类、ID等）
示例
html
<style>
ol li {
color: pink;
}
.navy li a {
color: green;
}
</style>
<ol>
<li>列表项</li>
<li><a href="#">链接</a></li>
</ol>
<ul class="navy">
<li><a href="#">绿色链接</a></li>
</ul>子选择器
子选择器只选择直接子元素（亲儿子元素）。
语法
css
元素1 > 元素2 { 样式声明 }特点
- 用大于号>分隔
- 只匹配直接子元素，不匹配孙子元素等
- 比后代选择器更精确
示例
html
<style>
.nav > a {
color: red;
}
</style>
<div class="nav">
<a href="#">红色链接（直接子元素）</a>
<p><a href="#">普通链接（非直接子元素）</a></p>
</div>并集选择器
并集选择器用于同时选择多个元素并应用相同样式。
语法
css
元素1, 元素2, 元素3 { 样式声明 }特点
- 用逗号分隔多个选择器
- 常用于批量设置相同样式
- 推荐竖排书写提高可读性
示例
html
<style>
div,
p,
.pig li {
color: pink;
}
</style>伪类选择器
伪类选择器为元素的不同状态添加特殊样式。
链接伪类
基本状态
css
a:link/* 未访问 */
a:visited /* 已访问 */
a:hover/* 鼠标悬停 */
a:active/* 激活状态 */使用建议
- 按LVHA顺序定义（:link -> :visited -> :hover -> :active）
- 实际开发中通常简写为：
css
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #369;
}:hover应用
文字样式变化
css
.c1:hover {
color: green;
font-size: 26px;
}显示隐藏内容
css
.download { display: none; }
.app:hover .download { display: block; }:after伪元素
添加内容
css
.c1::after {
content: "大帅哥";
}清除浮动
css
.clearfix::after {
content: "";
display: block;
clear: both;
}:focus伪类
用于表单元素获取焦点时的样式：
css
input:focus {
background-color: pink;
color: red;
}复合选择器总结
| 选择器 | 作用 | 特征 | 使用频率 | 语法示例 |
|---|---|---|---|---|
| 后代选择器 | 选择所有后代元素 | 包含所有层级 | 高 | .nav a |
| 子选择器 | 选择直接子元素 | 仅限一级嵌套 | 中 | .nav>a |
| 并集选择器 | 批量选择元素 | 集体声明样式 | 高 | .nav, .header |
| 链接伪类 | 链接不同状态样式 | 遵循LVHA顺序 | 高 | a:hover |
| :focus | 表单元素焦点样式 | 仅限表单元素 | 中 | input:focus |
样式覆盖规则
CSS遵循以下优先级规则：
- 相同选择器：后定义的样式覆盖前面的
- 不同选择器：按选择器权重计算
- 使用
!important可强制优先级最高
css
.c1 { color: red !important; } /* 最高优先级 */
.c2 { color: green; }警告
过度使用!important会导致样式难以维护，应谨慎使用。