CSS选择器是前端开发中非常重要的基础知识，而复合选择器则是其中功能强大且实用的部分。本文将详细介绍各种复合选择器的用法和应用场景，帮助您更高效地选择和控制页面元素。
1. 后代选择器（空格）
后代选择器通过空格连接两个选择器，用于选择嵌套在父元素内部的所有匹配子元素，不论嵌套层级有多深。
语法：祖先选择器 后代选择器{}
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>复合选择器</title><style>.container .box1-1 {width: 100px;height: 100px;background-color: #19ff32;color: #5440ff;}</style>
</head>
<body><div class="container"><!--作为container的亲儿子--><div class="box1-1">我是儿子</div><div class="box1"><!--做为container的孙子--><div class="box1-1">我是孙子<div class="box1-1"><!--做为container的孙孙-->我是孙孙子</div></div></div></div>
</body>
</html>运行结果：
注意点：
1. 后代包括：⼉⼦、孙⼦、重孙⼦……
2. 后代选择器中，选择器与选择器之前通过 空格 隔开
2. 子代选择器（>）
子代选择器使用>符号，只选择直接子元素，不会选择更深层级的元素。
语法：子代选择器:亲父亲选择器>亲儿子选择器{}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>子代选择器</title><style>.container>.box1{width: 100px;height: 100px;background-color: #19ff32;}</style>
</head>
<body><div class="container"><!--作为container的亲儿子--><div class="box1">我是儿子</div><div class="box1-1"><!--做为container的孙子--><div class="box1">我是孙子<div class="box1"><!--做为container的孙孙-->我是孙孙子</div></div></div></div>
</body>
</html>
注意点：
1. ⼦代只包括：⼉⼦
2. ⼦代选择器中，选择器与选择器之前通过 > 隔开
3. 并集选择器（,）
并集选择器可以同时选择多个元素，为它们设置相同的样式。
语法：并集选择器：选择器1，选择器2....{}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>并集选择器</title><style>h1,div p, .outer{width:100px;height:100px;background-color: red;}</style>
</head>
<body><h1>我是大标题</h1><h2>我是小标题</h2><p class="outer">我是盒子外部的段落！！！</p><div><p class="inner">我是盒子内部的段落！！！</p></div>
</body>
</html>
注意点：
1. 并集选择器中的每组选择器之间通过 , 分隔
2. 并集选择器中的每组选择器可以是基础选择器或者复合选择器
3. 并集选择器中的每组选择器通常⼀⾏写⼀个，提⾼代码的可读性
4.交集选择器
交集选择器可以通过对元素的类名和id名以及标签名字，对元素进行精准定位，为它们设置样式。
语法：交集选择器:标签名称.选择器名称{}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>交集选择器</title><style>/*给类名为boxid名为one的元素设置属性*/.box#one {width: 100px;height: 100px;background-color: red;}/*给标签为h2id名为three的元素设置属性*/h2#three{width: 100px;height: 100px;background-color: blueviolet;}</style>
</head>
<body><div class="box"><div class="box" id="one">111</div><h2 class="box" id="two">222</h2><h2 class="box" id="three">222</h2><p class="box" id="four">333</p></div>
</body>
</html>运行结果：
5.伪类结构选择器：hover{}
伪类结构主要是用来制作鼠标悬停的时候的动态效果。
语法：伪类选择器：hover{}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类结构选择器</title><style>h1:hover{color: red;}.outer:hover{background-color: #ef96c2;}a:hover{color: #0be4d5;}</style>
</head>
<body><h1>我是大标题</h1><p class="outer">伪类结构主要是用来制作鼠标悬停的时候的动态效果。</p><div><a href="http://www.baidu.com">百度一下</a></div>
</body>
</html>运行结果：
总结：
复合选择器是CSS中非常强大的工具，合理使用可以：
- 减少HTML中的类名依赖，保持代码整洁
- 提高样式选择效率，减少重复代码
- 实现更复杂的样式控制
- 创建丰富的交互效果