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