CTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相邻兄弟元素</title>
<!--
相邻兄弟元素选择的是紧接着在一个元素后面的元素
-->
<style>
#p1{
color: red;
}
.p2 +p{
color: blue;
}
/*-
* 兄弟选择器 选择后面所有元素
*/
#p1~p{
color: green;
}
</style>
</head>
<body>
<div class="test1">
<h1>山东省景点</h1>
<p id="p1">五岳独尊-泰山</p>
<p>孔孟之乡-济宁</p>
<p class="p2">江北水城-聊城</p>
<p>人间仙境-蓬莱</p>
</div>
</body>
</html>
