css ~兄弟选择符介绍
2017-01-21 20:39

css ~ 兄弟选择符

css ~可以叫做“兄弟选择符”,~兄弟选择符的作用是通过左右两个选择器,选择在第一个选择器后面的选择器,并且两个选择器是同一个父元素。

用语言解释有些晦涩,看下代码:

p ~ span{color:#C91010;}

这个样式就是选择p后面的同类span元素。

css ~ 兄弟选择符使用

<div class="sibcont">
   <span>妹纸前端</span>
    <p>moonshine前端</p>
    <span>css兄弟选择器</span>
    <b>css ~ 选择器</b>
    <span>css 一般同辈选择器</span>
</div>

.sibcont{
    background:#f1f1f1;
    border:1px solid #bababa;
    margin:20px;
    padding:20px;
}
p ~ span{color:#C91010;}

效果如下:

css兄弟选择器.png

第一个span因为做p标签前面所以没选中,p标签后面的两个span标签被选中,文字变成了红色。

前文讲的css +相邻选择器选择的元素必须是紧挨着相邻的关系,而css ~兄弟选择器不需要两个元素紧挨着,只要是同一辈的兄弟元素就可以。

css ~兄弟选择器的兼容性

兄弟选择器compat.png

这个css ~兄弟选择器的兼容性和css +相邻选择器的兼容性一样,都是IE7就支持。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(3415)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1