div+p、div~p的用法和区别

div+p ：将所有离<div>相邻的<p>标签选中

[CSS] 纯文本查看 复制代码

<style>
div + p{color: blue;}     /*div后面紧跟着的第一个p标签(必须是紧邻的标签)*/
</style>
<div>hello</div>
<p>world</p>

这个例子中world字体是蓝色！

div~p ：将<div>后面所有的<p>标签选中

[CSS] 纯文本查看 复制代码

<style>
div~p{color: orange;}
</style>
<div>第一段</div>
<p>p标签</p>
<p>p标签</p>

这个例子中所有p标签字体都是橙色！