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

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

发布时间:2018-01-19 14:30:59

<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）+只会影响对应的后面第一个（相邻的）兄弟节点样式；而~则影响对应的后面的所有兄弟节点样式。