css3的相邻选择器,css + 相邻元素选择器介绍

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;

}

• 妹纸前端
• 相邻选择器
• css选择器

效果如下：

这时候我们想要让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;

}

效果如下：

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;

}

效果如下：

哎，这样就能体现相邻选择器“+”的功能了，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;}

按钮

确定

取消

效果如下：

css +相邻选择器兼容性：

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