層次選擇器
阿新 • • 發佈：2021-08-11
層次選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--後代選擇器body p{background: lightseagreen；}-->
<!--子選擇器body>p{background:gold;}-->
<!--相鄰選擇器.active+p{background: olive;},只有一個，相鄰（向下）-->
<!--通用選擇器.active~p{background: blueviolet;}當前選擇的元素所有向下的元素-->
<style>
body p {
background: lightseagreen;
}
body > p {
background: gold;
}
.active+p{
background: olive;
}
.active~p{
background: blueviolet;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>