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 "+"号相鄰元素選擇器的相容性十分良好，對于元素間距或者一些其他用途十分友善。