后代选择器:空格
body p {
background-color: red;
}
子选择器:>
body >p {
background-color: red;
}
相邻兄弟选择器(向下选择一个):+
.active +p {
background-color: red;
}
通用选择器(向下选择多个):~
.active ~p {
background-color: red;
}
基础代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>p1</p>
<p>p2</p>
<ul>
<li>
<p>p3</p>
<p>p4</p>
</li>
</ul>
<p>p5</p>
<p>p6</p>
</body>
</html>
标签:body,层次,color,background,active,选择器,red
From: https://www.cnblogs.com/liuguangshuo/p/17988358