CSS的兄弟选择器 + 和 ~ 的区别

CSS的兄弟选择器 + 和 ~ 的区别

<div>
<p>这是个ul同父元素的第一个p<p>
<ul>
<li>这是第一个li。</li>
<li>这是第二个li。</li>
<li>这是第三个li。</li>
<li>这是第四个li。</li>
</ul>
<p>这是个ul同父元素的第二个p<p>
<p>这是个ul同父元素的第三个p<p>
</div>

效果图：

1.+

（1）同一个父元素的不同元素兄弟，+只会影响后面对应标签的第一个（相邻的）兄弟节点的标签样式。（并不影响前面的兄弟节点）

ul + p{
color:green;
}

效果图：

（2）同一个父元素的相同元素兄弟，+会循环依次影响对应标签的第一个（相邻的）兄弟节点的标签样式。（并不影响前面的兄弟节点）

li + li{
color:red;
}

效果图：

2.~

（1）同一个父元素的不同元素兄弟，~会影响后面对应标签的所有兄弟节点的标签样式。（并不影响前面的兄弟节点）

ul ~ p{
color:green;
}

效果图：

（2）同一个父元素的相同元素兄弟，~只会影响后面对应标签的所有兄弟节点的标签样式。（并不影响前面的兄弟节点）

li ~ li{
color:red;
}

效果图：

3.综上

（1）+和~都不会影响元素前面的兄弟节点的样式

（2）+只会影响对应的后面第一个（相邻的）兄弟节点样式；而~则影响对应的后面的所有兄弟节点样式。