css兄弟选择器，+~选择器的区别
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标签全部被选中。
那么到这⾥，我们了解了两种兄弟选择器+与~，⼆者区别在于+选择器⽤于选择紧跟⽬标标签之后的第⼀个兄弟标签，⽽~会选择⽬标标签之后所有兄弟标签。现在你能区分两个选择器的区别了吗？

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。