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

 壹 ❀ 引

实习生在写搜索框下拉提示时,遇到了不知道怎么解决的问题,所以来问我。效果不难,鼠标选中输入框(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标签全部被选中。

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

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

猜你喜欢

转载自www.cnblogs.com/echolun/p/11326743.html
0条评论
添加一条新回复
  
今日推荐