1,相邻的兄弟选择器,只能找仅仅相邻且往后找的第一个兄弟,兄弟间用+号连接
<style>
div+p{
color: red;
}
</style>
</head>
<body>
<p>前端</p>
<div>尚硅谷</div>
<p>java</p>
<p>大数据</p>
<p>UI</p>
</body>
运行结果:
2,通用兄弟选择器,选中div所有的兄弟p元素且必须是往后找的兄弟,兄弟间用~号连接
代码演示:
<style>
div+p{
color: red;
}
div~p{
color: blue;
}
</style>
</head>
<body>
<p>前端</p>
<div>尚硅谷</div>
<p>java</p>
<p>大数据</p>
<p>UI</p>
</body>
运行结果: