利用兄弟元素选择器可以选择同一级别的元素。
1、+ 选择后面紧挨的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
/*
为div后的第一个子元素p设置样式
注意：div的第一个兄弟子元素必须是p元素，否则不起作用
* */
div + p{
background-color: green;
}
</style>
</head>
<body>
<div>戴望舒</div>
<p>丁香一样的颜色</p>
<p>丁香一样的芬芳</p>
<p>丁香一样的忧愁</p>
</body>
</html>浏览器中显示为：
2、~选择后面所有指定的兄弟元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
/*
为div后的所有p元素设置样式
* */
div ~ p{
background-color: red;
}
</style>
</head>
<body>
<div>戴望舒</div>
<p>丁香一样的颜色</p>
<p>丁香一样的芬芳</p>
<p>丁香一样的忧愁</p>
</body>
</html>浏览器中显示为：
