<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p{*/
/* color: deepskyblue;*/
/*}*/
/*后代选择器，选择标签内含的算有p元素*/
ul p{
background: greenyellow;
}
ol p{
background: darkorange;
}
/*子选择器，选择标签包含的第一层次的p元素*/
body>p{
background: deeppink;
}
/*弟弟选择器，选择该元素同级下的第一个p元素
可以使用id定位一个元素，或类选择器定位某类元素*/
#p1+p{
background: darkorchid;
}
/*通用选择器（弟弟们选择器），选择同级下的所有p元素*/
.select~p{
border-radius: 20px;
}
</style>
</head>
<body>
<p>p0</p>
<p class="select" id="p1">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>ul-li-p4</p>
</li>
<li>
<p>ul-li-p5</p>
</li>
<li>
<p>ul-li-p6</p>
</li>
</ul>
<ol>
<li>
<p>ol-li-p7</p>
</li>
<li>
<p>ol-li-p8</p>
</li>
<li>
<p>ol-li-p9</p>
</li>
</ol>
</body>
</html>