目录
三、相邻兄弟选择器（Adjacent Sibling Selector）
四、通用兄弟选择器（General Sibling Selector）
六、交集选择器（Intersection Selector）
前言
在Web开发中，CSS选择器是用来为HTML元素应用样式的关键工具。常规的选择器如类选择器、ID选择器、标签选择器等虽然能处理一些基本的样式应用，但在复杂页面中，元素之间的关系和层级结构常常要求使用更加灵活的复合选择器。复合选择器可以让你更精确地指定哪些元素需要应用样式。
在本篇博客中，我们将深入探讨几种常用的复合选择器，如：子代选择器、兄弟选择器、并集选择器、交集选择器等。
一、子代选择器（Descendant Selector）
1. 什么是子代选择器？
子代选择器是用于选取某个元素内部的所有后代元素。后代可以是该元素的直接子元素，也可以是更深层次的子元素。子代选择器的语法非常简单：两个元素之间使用空格隔开。
2. 基本语法
父元素 子元素 {
属性: 值;
}
3. 示例
<div class="container">
<p>这是一段文本</p>
<span>这是一段被span包裹的文本</span>
</div>
.container p {
color: red;
}
在这个例子中，.container p表示所有.container类内的p标签，包括直接子元素和更深层次的子元素，都会应用红色字体。
4. 注意事项
- 子代选择器的优先级较低，因为它匹配的是所有后代元素，而不只限于直接子元素。
- 使用子代选择器时要小心性能问题，尤其是在DOM结构较复杂时，子代选择器可能会导致浏览器需要遍历多个嵌套层次，影响渲染速度。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后(子代)代选择器</title>
<style>
ul li{
color: red;
}
ol li{
color: blue;
}
ol li a{
color: aquamarine;
}
li.vi a{
color: chocolate;
}
</style>
</head>
<body>
<ul>
<li>苹果</li>
<li>
<ul>
<li>红富士</li>
<li>红心</li>
</ul>
</li>
</ul>
<ol>
<li>华为</li>
<li>
<a href="">华为手机</a>
</li>
<li>小米</li>
<li class="vi">
<a href="">小米手机</a>
</li>
</ol>
</body>
</html> 
二、直接子元素选择器（Child Selector）
1. 什么是直接子元素选择器？
直接子元素选择器（>）用于选取某个元素的直接子元素。它比子代选择器更加严格，只匹配该元素的直接子元素，而不包括更深层次的后代。
2. 基本语法
父元素 > 子元素 {
属性: 值;
}
3. 示例
<div class="container">
<p>这是一个段落</p>
<div>这是一个div元素</div>
<div><p>这是一个嵌套的段落</p></div>
</div>
.container > p {
color: blue;
}
在这个例子中，<p>标签会被选中并应用蓝色文字样式，而嵌套在<div>内的<p>标签则不会被选中。
4. 注意事项
- 使用
>时，你可以精确控制只应用于直接子元素，避免不必要的样式继承。 - 在层级结构深的情况下，直接子元素选择器可以大大提高性能，因为它不会匹配所有后代元素，只选择直系子元素。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 子代选择器示例</title>
<style>
/* 使用子代选择器，选择id为parent的元素下的直接子元素p */
#parent > p {
color: blue;
}
/* 使用子代选择器，选择class为child的元素下的直接子元素span */
.child > span {
font-weight: bold;
}
div>p{
color: red;
}
span>p{
color: red;
}
</style>
</head>
<body>
<div id="parent">
<p>这个段落的文字颜色会被设置为蓝色。</p>
<div>
<p>这个段落的文字颜色不会被改变，因为它不是#parent的直接子元素。</p>
</div>
</div>
<div class="child">
<span>这个span的字体会被加粗。</span>
<p>
<span>这个span的字体不会被加粗，因为它不是.child的直接子元素。</span>
</p>
</div>
</body>
</html> 
三、相邻兄弟选择器（Adjacent Sibling Selector）
1. 什么是相邻兄弟选择器？
相邻兄弟选择器（+）用于选取紧随指定元素后面的兄弟元素。这意味着它只会选择直接紧邻的元素，而不会选择其他的兄弟元素。
2. 基本语法
元素1 + 元素2 {
属性: 值;
}
3. 示例
<h1>标题1</h1>
<p>这是段落1</p>
<h1>标题2</h1>
<p>这是段落2</p>
h1 + p {
color: green;
}
在这个例子中，第二个<p>标签会应用绿色字体样式，因为它是紧接着第一个<h1>标签后的兄弟元素。
4. 注意事项
- 相邻兄弟选择器只能作用于紧随其后的兄弟元素。如果中间有其他元素，选择器将无法匹配。
- 它比其他选择器更具特定性，因为它只选择相邻的兄弟元素。
四、通用兄弟选择器（General Sibling Selector）
1. 什么是通用兄弟选择器？
通用兄弟选择器（~）用于选取所有紧随指定元素之后的兄弟元素，不限于直接紧邻的元素。
2. 基本语法
元素1 ~ 元素2 {
属性: 值;
}
3. 示例
<h1>标题1</h1>
<p>段落1</p>
<div>DIV元素</div>
<p>段落2</p>
h1 ~ p {
color: purple;
}
在这个例子中，h1 ~ p将匹配所有位于<h1>之后的<p>元素，并将它们的文本颜色设置为紫色。因此，第二个<p>元素会被选中，而**第一个<p>**元素不会，因为它位于h1之前。
4. 注意事项
- 与相邻兄弟选择器不同，通用兄弟选择器可以选中所有位于目标元素之后的兄弟元素，而不仅仅是直接紧邻的元素。
- 使用通用兄弟选择器时，浏览器的计算开销可能会略高，尤其是在较复杂的页面结构中。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>兄弟选择器</title>
<style>
/* 选中div后面紧挨着的p--相邻*/
/* div + p{
color: red;
} */
/* 选中div后面所有的p--通用 */
div~p{
color: blue;
}
</style>
</head>
<body>
<p>CSS</p>
<div>前端</div>
<p>HTML</p>
<div>后端</div>
<p>C++</p>
<p>Python</p>
</body>
</html> 
五、并集选择器（Union Selector）
1. 什么是并集选择器？
并集选择器（,）用于组合多个选择器，表示同时匹配多个选择器，任何一个选择器匹配的元素都会应用相同的样式。
2. 基本语法
选择器1, 选择器2, 选择器3 {
属性: 值;
}
3. 示例
<p>段落1</p>
<h1>标题1</h1>
<h2>标题2</h2>
p, h1, h2 {
color: orange;
}
在这个例子中，<p>、<h1>、和<h2>都会被应用橙色字体样式。
4. 注意事项
- 使用并集选择器时，你可以一次性选中多个元素，避免重复编写样式规则。
- 但是需要注意的是，多个选择器之间的顺序不影响样式应用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 并集选择器示例</title>
<style>
/* 使用并集选择器为多个元素设置相同的样式 */
h1, p, span {
color: blue;
font-family: Arial, sans-serif;
}
h1{
font-size: 40px;
}
</style>
</head>
<body>
<h1 >这是一个标题</h1>
<p>这是一个段落。</p>
<span>这是一个span元素。</span>
</body>
</html> 
六、交集选择器（Intersection Selector）
1. 什么是交集选择器？
交集选择器（ ）表示多个选择器的交集，即选取那些同时满足所有选择器条件的元素。虽然CSS标准中没有“交集选择器”这个术语，但我们可以通过组合多个选择器来达到交集效果。
2. 基本语法
选择器1.选择器2 {
属性: 值;
}
3. 示例
<div class="highlight active">这是一个高亮且激活的div</div>
<div class="highlight">这是一个仅高亮的div</div>
.highlight.active {
background-color: yellow;
}
在这个例子中，只有同时具备.highlight和.active类的<div>元素才会应用黄色背景。
4. 注意事项
- 交集选择器非常有用，尤其是需要同时满足多个条件时。
- 交集选择器的优先级相对较高，因为它会选择具体的元素匹配组合。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交集选择器</title>
<style>
p.tele{
color: red;
}
.tele.rich{
color: blue;
}
h2{
color: aquamarine;
}
</style>
</head>
<body>
<h2 class="tele rich">张三</h2>
<p class="tele">张三的电话是:123456789</p>
<h2>李四</h2>
<p>李四的电话是:987654321</p>
<h2>王五</h2>
<p>王五的电话是:123456789</p>
</body>
</html> 
七、总结
CSS复合选择器为我们提供了非常强大的样式控制能力，能够精确地选择元素并进行样式应用。通过合理使用子代选择器、兄弟选择器、并集选择器、交集选择器等，可以让页面的样式变得更加灵活和高效。在使用这些选择器时，务必注意它们的优缺点与性能影响，尤其是在复杂页面中，要避免选择器过度嵌套或使用过多的复合选择器。