css兄弟选择器，+ ~选择器的区别

时间：2019-08-16 18:53:33 阅读：91 评论：0 收藏：0 [点我收藏+]

壹 ? 引

实习生在写搜索框下拉提示时，遇到了不知道怎么解决的问题，所以来问我。效果不难，鼠标选中输入框(focus)时，展示搜索关键字相关提示，看了眼dom结构是这样的：

在她的理解里面，选中父元素可以操控子元素样式，而此时输入框和下拉框是兄弟关系，所以难住了，听到这里我不假思索说了句，用兄弟选择器。

贰 ? 兄弟选择器

1.相邻兄弟选择器+

+表示相邻兄弟选择器，例如h3+p表示选中每个h1之后同级（相同父级）且紧接其后的第一个p元素；我们来看看效果：

h3+p{
    background: #bbded6;
    color: #fff;
}

<p>葡萄</p>
<h3>我是听风是风</h3>
<p>苹果</p>
<p>橘子</p>
<div>
　　<p>香蕉</p>
</div>
<h3>我是听风是风</h3>
<p>桃子</p>

技术分享图片

可以看到，h3之前的p标签不会生效，非同级的p标签也不会生效，有效的只有紧接h3之后的p标签。

2.通用兄弟选择器

~表示通用兄弟选择器，例如h3~p表示选中每个h3之后同级（相同父级）且紧接其后的所有p元素；我们将选择器由 + 改为 ~ ，效果如下图：

可以看到，h3之后所有同级p标签全部被选中。

那么到这里，我们了解了两种兄弟选择器+与~，二者区别在于+选择器用于选择目标标签之后的第一个兄弟标签，而~会选择所有兄弟标签。

现在你能区分两个选择器的区别了吗？

原文：https://www.cnblogs.com/echolun/p/11326743.html

踩

(0)

评论一句话评论（0）

分享档案

更多>