css + 相邻元素选择器介绍
2017-01-21 20:40

css相邻选择器

css相邻选择器用来“+”号表示,+号左右两个选择器,选择第一个选择器后面紧跟着的第二个选择器,两个选择器的元素必须是相邻关系才行。

ul{
    margin:20px;
    padding:20px;
    border:1px solid #ccc;
    list-style:none;
}
ul li{
    background:#f1f1f1;
    border:1px solid #bababa;
    font-size:13px;
    line-height:26px;
}
<ul>
    <li>妹纸前端</li>
    <li>相邻选择器</li>
    <li>css选择器</li>
</ul>

效果如下:

siblingselector.png

这时候我们想要让li元素有间距,就需要有“margin-top”样式,若是都跟li添加上“margin-top”样式,如下:

ul{
    margin:20px;
    padding:20px;
    border:1px solid #ccc;
    list-style:none;
}
ul li{
    background:#f1f1f1;
    border:1px solid #bababa;
    font-size:13px;
    line-height:26px;
    margin-top:12px;
}

效果如下:

siblingmargintop.png

li之间是有了间距了,但是ul中的上下空白不均匀了,第一个li我们是不希望他有“margin-top”样式的。这时候就是相邻元素选择器“+”的用武之地了。

ul{
    margin:20px;
    padding:20px;
    border:1px solid #ccc;
    list-style:none;
}
ul li{
    background:#f1f1f1;
    border:1px solid #bababa;
    font-size:13px;
    line-height:26px;
}
ul li + li{
    margin-top:12px;
}

效果如下:

siblingadd.png

哎,这样就能体现相邻选择器“+”的功能了,css相邻选择器的作用是选择特定元素的下一个元素。

css相邻选择器的常见应用

css相邻选择器“+”号除了上面的用处,还可以用在自定义按钮上。

.sibcont{
    background:#f1f1f1;
    border:1px solid #bababa;
    margin:20px;
    padding:20px;
    text-align: right;
}
.sibbtn{
    display:inline-block;
    line-height: 28px;
    font-size:13px;
    color:#fff;
    background:#1D78B7;
    padding:0 1em;
    text-decoration: none;
}
.sibbtn + .sibbtn{margin-left:12px;}

<div class="sibcont">
    <a href="javascript:;" class="sibbtn">按钮</a>
    <a href="javascript:;" class="sibbtn">确定</a>
    <a href="javascript:;" class="sibbtn">取消</a>
</div>

效果如下:

sibbtn.png

css +相邻选择器兼容性:

siblingcompat.png

css "+"号相邻元素选择器的兼容性十分良好,对于元素间距或者一些其他用途十分方便。

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