层次选择器
后代选择器
简介
- 后代选择器可以选择作为某元素后代的元素（包括儿子，孙子，重孙子）
- 两个元素之间的层次间隔可以是无限的
示例
<!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>
