层次选择器
后代选择器
简介
- 后代选择器可以选择作为某元素后代的元素（包括儿子，孙子，重孙子）
- 两个元素之间的层次间隔可以是无限的
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body p {
background-color: aquamarine;
}
</style>
</head>
<body>
<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
<ul>
<li>
<p>第四个段落</p>
</li>
<li>
<p>第五个段落</p>
</li>
</ul>
</body>
</html>
子选择器
简介
- 与后代选择器相比，子选择器只能选择作为某元素的子元素的元素
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body>p {
background-color: aquamarine;
}
</style>
</head>
<body>
<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
<ul>
<li>
<p>第四个段落</p>
</li>
<li>
<p>第五个段落</p>
</li>
</ul>
</body>
</html>
相邻兄弟选择器
简介
- 相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 选中active向下的第一个<p>元素 */
.active+p {
background-color: aquamarine;
}
/* 选取所有位于<li>标签向下的第一个<li>元素 */
li + li {
background-color: chartreuse;
}
</style>
</head>
<body>
<p>第一个段落</p>
<p class="active">第二个段落</p>
<p>第三个段落</p>
<p>第四个段落</p>
<ul>
<li>
<p>第四个段落</p>
</li>
<li>
<p>第五个段落</p>
</li>
<li>
<p>第六个段落</p>
</li>
</ul>
<p>第七个段落</p>
</body>
</html>
通用兄弟选择器
简介
- 通用兄弟选择器选中当前元素的向下的所有兄弟元素
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 选中active向下的所有<p>元素 */
.active~p {
background-color: aquamarine;
}
</style>
</head>
<body>
<p>第一个段落</p>
<p class="active">第二个段落</p>
<p>第三个段落</p>
<p>第四个段落</p>
<ul>
<li>
<p>第四个段落</p>
</li>
<li>
<p>第五个段落</p>
</li>
<li>
<p>第六个段落</p>
</li>
</ul>
<p>第七个段落</p>
</body>
</html>
