兄弟选择器——用于选择除第一个元素外的其他兄弟元素

兄弟选择器——用于选择除第一个元素外的其他兄弟元素

兄弟选择器是CSS选择器中的一种，如 div.bar + ul表示：选择类名为bar的div的为ul的兄弟元素，我们可以用它来选择除第一个元素外的其他兄弟元素。

比如下面这种情况：

<ul>
        <li class="item"> item 1 </li>
        <li class="item"> item 2 </li>
        <li class="item"> item 3 </li>
        <li class="item"> item 4 </li>
        <li class="item"> item 5 </li>
</ul>

            

这是一个ul，此时需要每个li之间间隔一定距离，当然我们不用line-height，因为我们目的是让li之间产生距离！也许我们会这样做：

.item {width:60px;background: #000;color:#fff;margin-top: 10px;}
li:first-child {margin-top: 0;}

得到：

但是第一个li进行了两次样式设置，后面覆盖了前面的。如果我们想要避免这种情况的话，就可以用兄弟元素选择器：

 .item {width:60px;background: #000;color:#fff;}
 li + li {margin-top: 10px;}

效果是一样的。
也许用处不大，但总归是一个小技巧吧！~~~