CSS选择器是前端开发中非常重要的基础知识，而复合选择器则是其中功能强大且实用的部分。本文将详细介绍各种复合选择器的用法和应用场景，帮助您更高效地选择和控制页面元素。
1. 后代选择器（空格）
后代选择器通过空格连接两个选择器，用于选择嵌套在父元素内部的所有匹配子元素，不论嵌套层级有多深。
语法：祖先选择器 后代选择器{}
代码示例：
css
<!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>运行结果：
注意点：
- 后代包括：⼉⼦、孙⼦、重孙⼦......
- 后代选择器中，选择器与选择器之前通过 空格 隔开
2. 子代选择器（>）
子代选择器使用>符号，只选择直接子元素，不会选择更深层级的元素。
语法：子代选择器:亲父亲选择器>亲儿子选择器{}
css
<!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>
注意点：
- ⼦代只包括：⼉⼦
- ⼦代选择器中，选择器与选择器之前通过 > 隔开
3. 并集选择器（,）
并集选择器可以同时选择多个元素，为它们设置相同的样式。
语法：并集选择器：选择器1，选择器2....{}
css
<!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>
注意点：
- 并集选择器中的每组选择器之间通过 , 分隔
- 并集选择器中的每组选择器可以是基础选择器或者复合选择器
- 并集选择器中的每组选择器通常⼀⾏写⼀个，提⾼代码的可读性
4.交集选择器
交集选择器可以通过对元素的类名和id名以及标签名字，对元素进行精准定位，为它们设置样式。
语法：交集选择器:标签名称.选择器名称{}
css
<!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{}
css
<!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中的类名依赖，保持代码整洁
- 提高样式选择效率，减少重复代码
- 实现更复杂的样式控制
- 创建丰富的交互效果