一、CSS复合选择器
1. 什么是复合选择器
在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
- 复合选择器可以更准确、更高效的选择目标元素（标签）
- 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
- 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等
2. 后代选择器（重要）
后代选择器又称为包含选择器，可以选择父元素里面子元素。起写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
2.1 使用方式
元素1 元素2 { 样式声明 }
上述语法表示 选择元素1里面的所有元素2（后代元素）。
- 元素1 和 元素2之间用空格隔开
- 元素1 是父级，元素2 是子级，最终选择的是元素2
- 元素2 可以是儿子，也可以是孙子等，只要是元素1的后代即可
- 元素1 和 元素2 可以是任意基础选择器
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器之后代选择器</title>
<style>
/* 我想把ol里面的小li选出来改为pink */
ol li {
color: pink;
}
ol li a {
color: rgb(255, 81, 0);
}
ul li {
color: green;
}
.nav li a {
color: yellow;
}
</style>
</head>
<body>
<ol>
<li>我是ol 的孩子</li>
<li>我是ol 的孩子</li>
<li>我是ol 的孩子</li>
<li><a href="#">我是孙子</a></li>
</ol>
<ul>
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
<li><a href="#">我不会变</a></li>
</ul>
<ul class="nav">
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
<li><a href="#">我不会变</a></li>
<li><a href="#">我不会变</a></li>
<li><a href="#">我不会变</a></li>
<li><a href="#">我不会变</a></li>
</ul>
</body>
</html>
3. 子选择器（重要）
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选择亲儿子元素。
2.1 使用方式
元素1 > 元素2 { 样式声明 }
表示选择元素1里面的所有直接后代（子元素）元素2。
- 元素1和元素2中间用大于号隔开
- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2必须是亲儿子，其孙子、重孙子之类都不归其管，也可以叫他亲儿子选择器。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器之子选择器</title>
<style>
.nav a {
color: green;
}
.nav>a {
color: red;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
</body>
</html>
