本文介绍了CSS中的层级选择器，包括后代选择器、子级选择器、相邻兄弟选择器和普通兄弟选择器的用法。通过理解HTML元素的父子、兄弟和祖先后代关系，可以更有效地定位和样式化网页元素。
书接上文，上回书咱们说到了 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>
最低0.47元/天 解锁文章
4063
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
