CSS 复合选择器
复合选择器是由多个基础选择器组合而成的选择器，用于更精确地选择目标元素。以下是常见的复合选择器及其详细介绍：
1. 交集选择器（Intersection Selector）
- 语法：
选择器1选择器2 - 作用：选择同时满足多个条件的元素。
- 示例：
css p.highlight { color: red; }选择所有同时具有<p>标签和class="highlight"的元素。
2. 并集选择器（Grouping Selector）
- 语法：
选择器1, 选择器2, 选择器3 - 作用：选择多个选择器匹配的元素。
- 示例：
css h1, h2, h3 { font-family: Arial, sans-serif; }选择所有<h1>、<h2>和<h3>元素，并将字体设置为 Arial。
3. 后代选择器（Descendant Selector）
- 语法：
选择器1 选择器2 - 作用：选择嵌套在指定元素内部的元素。
- 示例：
css div p { color: green; }选择所有嵌套在<div>元素内的<p>元素。
4. 子元素选择器（Child Selector）
- 语法：
选择器1 > 选择器2 - 作用：选择作为指定元素直接子元素的元素。
- 示例：
css ul > li { list-style-type: square; }选择所有作为<ul>直接子元素的<li>元素。
5. 相邻兄弟选择器（Adjacent Sibling Selector）
- 语法：
选择器1 + 选择器2 - 作用：选择紧接在指定元素后的同级元素。
- 示例：
css h1 + p { font-weight: bold; }选择紧接在<h1>元素后的<p>元素。
6. 通用兄弟选择器（General Sibling Selector）
- 语法：
选择器1 ~ 选择器2 - 作用：选择在指定元素后的所有同级元素。
- 示例：
css h1 ~ p { color: purple; }选择所有在<h1>元素后的<p>元素。
7. 属性选择器组合
- 语法：
选择器[属性名="值"] - 作用：选择具有指定属性值的元素。
- 示例：
css input[type="text"] { border: 1px solid #ccc; }选择所有type="text"的<input>元素。
8. 伪类选择器组合
- 语法：
选择器:伪类 - 作用：选择元素的特定状态或位置。
示例： ```css a:hover { color: orange; }
li:nth-child(2) { background-color: lightblue; } ```
9. 伪元素选择器组合
- 语法：
选择器::伪元素 - 作用：选择元素的特定部分。
示例： ```css p::first-letter { font-size: 2em; }
p::before { content: "★"; } ```
总结
复合选择器通过组合多个基础选择器，可以更精确地选择目标元素。常见的复合选择器包括： - 交集选择器 - 并集选择器 - 后代选择器 - 子元素选择器 - 相邻兄弟选择器 - 通用兄弟选择器 - 属性选择器组合 - 伪类选择器组合 - 伪元素选择器组合
掌握这些复合选择器后，可以更灵活地编写 CSS 样式规则。