书接上文，上回书咱们说到了 CSS 的基本选择器，虽然只有 5 个，但用法上还是有一些地方是需要咱们注意的。尤其是属性选择器和选择器的优先级别这两块内容上！
接下来，咱们来说一说选择器里面的第二类，叫做层级选择器。这种选择器呢，说白了是利用 HTML 元素之间的关系来定位 HTML 元素的。所以说啊，想要把这种选择器搞明白，就得先搞明白 HTML 元素之间的关系是怎么样的。
HTML 元素之间的关系
说到 HTML 元素之间的关系呢，就得先跟你说一个概念了，叫做树结构。什么意思呢？就是说，从 <html> 这个根标签开始，可以把 HTML 所有的元素展开成一个像树一样的形状，来表示 HTML 元素之间的关系。
当然了，这么说是很难说得清楚的，所以，咱们还是通过示例的方式来看看这个树结构到底是怎么样的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML元素的树结构</title>
</head>
<body>
<h2 class="text title">基本选择器</h2>
<p>基本选择器是 CSS 所有选择器中最简单，也是最常用的选择器。基本选择器一共有 5 个具体用法：</p>
<ul>
<li>类型选择器</li>
<li>类选择器</li>
<li>ID 选择器</li>
<li>通用选择器</li>
<li>属性选择器</li>
</ul>
</body>
</html>
这样的一个 HTML 就可以表示成树结构的方式，这样咱们就能很轻松地知道 HTML 元素之间的关系啦：
从上面这个树结构的图解里面，咱们可以看出 HTML 元素之间的关系：
-
父子关系：如果一个元素包含另一个元素，外层元素就是父级元素，被包含的元素就是子级元素。
比如
<head>元素和<meta>元素就是父子关系，当然了，<title>元素也是<head>元素的子级元素。 -
兄弟关系：如果两个或者多个元素具有同一个父级元素的话，那它们就是兄弟关系。
比如
<meta>元素和<title>元素的父级元素都是<head>元素，那<meta>元素和<title>元素就是兄弟关系。再比如<h2>元素、<p>元素和<ul>元素也是兄弟关系，因为它们的共同父级元素是<body>元素。 -
祖先和后代的关系：如果一个元素是祖先元素的话，那包含在这个元素内部的其他所有元素都是后代元素。
比如如果
<body>元素是祖先元素的话，咱们可以看到<h2>元素、<p>元素、<ul>元素和<li>元素都是后代元素。
说句题外话，HTML 元素之间的这三种关系是相当的重要。为啥呢？因为不仅仅 CSS 的层级选择器是通过这三种关系实现的，还有很多功能都是依靠这三种关系实现的。所以说啊，先把 HTML 元素的树结构搞清楚，会为咱们以后学习很多内容打下基础的！
层级选择器的种类
根据 HTML 元素之间的这三种关系呢，CSS 的层级选择器相应地提供了这么 4 个选择器：
- 后代选择器
- 子级选择器
- 相邻兄弟选择器
- 普通兄弟选择器
那么接下来，咱们就一个一个的看一看它们的具体用法吧。
后代选择器
咱们先来看看后代选择器吧。如果把某个 HTML 元素当做是祖先元素的话，那所有包含在这个元素里面的其他所有元素都是后代元素，而后代选择器就是定位到这些后代元素。
后代选择器的语法结构是这个样子的：
选择器1 选择器2 {
样式声明块
}
关于这个语法结构，咱还是有些内容要说明白的：
- 选择器1：是用来定位上面咱们所说的某个祖先元素的。
- 选择器2：是用来定位某个祖先元素里面符合选择器要求的所有后代元素。
- 连接符：选择器1和选择器2之间是用空格（
' '）来连接的。是的！你没看错，就是空格！
比如在上面那个示例里面，如果把 <body> 作为祖先元素的话，咱们就可以定位到所有的 <li> 元素：
body li {
color: lightcoral;
font-size: 12px;
}
这样设置之后，咱们运行这个 HTML 可以看到所有的 <li> 元素里面的文本样式都改变了：
在这儿，有个事儿你得注意一下：就是后代选择器是可以定位到子级元素的。
子级选择器
整明白了后代选择器之后，咱们再来看看子级选择器。这个选择器就是把某个 HTML 元素当做父级元素的话，那子级选择器就是定位到这个元素下一级的元素。
子级选择器的语法结构是这个样子的：
选择器1>选择器2 {
样式声明块
}
关于这个语法结构，咱也是有些内容要说明白的：
- 选择器1：是用来定位上面咱们所说的某个父级元素的。
- 选择器2：是用来定位某个祖先元素里面符合选择器要求的所有子级元素。
- 连接符：选择器1和选择器2之间是用大于号（
>）来连接的。
比如在上面那个示例里面，如果把 <body> 作为祖先元素的话，咱们就可以定位作为子级元素的 <h2> 元素、<p> 元素或者 <ul> 元素：
body p {
color: lightcoral;
font-size: 12px;
}
这样设置之后，咱们运行这个 HTML 可以看到的 <p> 元素里面的文本样式都改变了：
相邻兄弟选择器
接下来是兄弟选择器，CSS 提供两个兄弟选择器，一个是相邻兄弟选择器，一个是普通兄弟选择器。咱们先来搞清楚相邻兄弟选择器吧。
这个选择器的语法结构是这个样子的：
选择器1+选择器2 {
样式声明块
}
关于这个语法结构，咱也还是有些内容要说明白的：
- 选择器1：是用来定位上面咱们所说的某个目标元素的。
- 选择器2：是用来定位目标元素的下一个相邻兄弟元素。
- 连接符：选择器1和选择器2之间是用大于号（
>）来连接的。
比如在上面那个示例里面，如果把第一个 <li> 作为目标元素的话，那相邻兄弟选择器就可以定位到第二个 <li> 元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相邻兄弟选择器</title>
<style>
#typeSelector+li {
color: lightcoral;
font-size: 12px;
}
</style>
</head>
<body>
<h2 class="text title">基本选择器</h2>
<p>基本选择器是 CSS 所有选择器中最简单，也是最常用的选择器。基本选择器一共有 5 个具体用法：</p>
<ul>
<li id="typeSelector">类型选择器</li>
<li>类选择器</li>
<li>ID 选择器</li>
<li>通用选择器</li>
<li>属性选择器</li>
</ul>
</body>
</html>
这块儿咱们为了方便定位到第一个 <li> 元素，咱们给它设置了 id 属性。
普通兄弟选择器
普通兄弟选择器和相邻兄弟选择器不同的是，普通兄弟选择器是定位某个目标元素后面的所有兄弟元素。它的语法结构是这个样子的：
选择器1~选择器2 {
样式声明块
}
关于这个语法结构，咱都是有些内容要说明白的：
- 选择器1：是用来定位上面咱们所说的某个目标元素的。
- 选择器2：是用来定位目标元素后面所有的相邻兄弟元素。
- 连接符：选择器1和选择器2之间是用波浪号（
~）来连接的。
说个题外话，
~符号是通过Shift+ ` 键来输出的。当然了，你要是知道就算了！
同样还是这个示例，咱们把选择器改成普通兄弟选择器：
#typeSelector~li {
color: lightcoral;
font-size: 12px;
}
改完之后，再来看一下运行的效果：
写在最后的话
看到这儿了，说明你已经掌握了 CSS 的层级选择器的用法了。但我要和你说的是，除了层级选择器的各个用法之外，你还得注意 HTML 元素之间的这三种关系。尤其是父子和祖先后代有时候确实不太容易搞清楚，所以我建议你在最开始的时候，可以考虑先把 HTML 所有的元素按照这种树结构的方式先画出来，再去看它们之间的关系，会容易得多！