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

兄弟选择器是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;}

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

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

获得除当前元素外的所有其他元素，并对其他元素进行设置
//元素初始设置为display = 'none' let type = document.getElementsByClassName('type')//获得页面中所有class为type的元素 l ...
css 选择器如何选择大于 N 的情况？第n个元素之后的情况
我们可以通过 nth-child 选择第几个子元素但是要做到大于第n的元素怎么做的其实我们可以通过配合实现呢假设我把大于第二个元素也就是从第三个开始都是红色 ...
Jquery点击元素外的区域隐藏元素
$(document).on('click', function(e) {if (0 == $((e.target || e.srcElement)).closest('.mask,.panel'). ...
HTML CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器
复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器.并集选择器.后代选择器.子元素选择器.相邻兄弟选择器和属性选择器等. 交集选择器交集选择器由两个选择器直接构成,其中第一个 ...
相邻兄弟选择器（+）、子选择器（）、兄弟选择器（~）等用法
前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+).子选择器(& ...
css常用选择器：相邻兄弟选择器（+）、子选择器（＞）、兄弟选择器（~）、属性选择器等用法
前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+).子选择器(& ...
【CSS】相邻兄弟选择器
相邻兄弟选择器相邻选择器(+) 兄弟选择器(~) 相邻选择器(+) 相邻兄弟选择器可选择紧接在另一个元素后的元素,且二者具有相同的父亲元素.注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符. 前 ...
CSS之毗邻选择器与普通兄弟选择器的区别
CSS之毗邻选择器与普通兄弟选择器的区别在一些教程网站上只看到兄弟选择器的说法,也就是加号(+),但是偶然听说了毗邻兄弟选择器的说法所以特意实验一下,找一下区别. 从字面意思来看:毗邻兄弟选择器即 ...
html兄弟选择器怎么用,兄弟选择器 - 选择后面相邻的所有兄弟元素 - css3普通选择器...
兄弟选择器版本:CSS3 定义和用法E~F用于选择第一个元素之后所有的兄弟级的元素.只作用于同级元素. 这两个元素必须具有相同的父元素.F不必紧跟E. 语法:E~F{sRules} 选择E元素后面的 ...

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

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

最新文章

热门文章