往期链接：
「CSS之选择器」
「CSS之选择器（二）」
「CSS之选择器（三）」
「CSS之选择器（四）」
「CSS之选择器（五）」
「CSS之选择器（六）::before和::after」
「CSS之选择器（七）:empty」
前言
在我们开发的时候，应该会遇到在一个父节点下相同节点实现相同的样式，比如一个 ul 标签下 n 个 li 标签。那今天我们来介绍两个应用比较广泛的选择器 + 和 ~ ，他也可以实现我们前面说到的效果。
+ 和 ~
他们两个都是作用于当前节点后面的同胞节点，不同的点是：
通常代码格式如下所示：
input:checked + div {} input:checked ~ div {}
复制代码
代码实现
下面我们就通过一个案例具体向大家展示一下，这个二者选择器的区别。
先来一张效果图。
这里简单说一下，
第一张图，是通过 + 控制的
第二张图，是通过 ~ 控制的
而第三张图，是通过 + 和 class 控制的
接下来请看代码：
<div class="specify-selector"> <ul class="list"> <li>我是资源</li> <li class="current">当前资源</li> <li>我是资源</li> <li>我是资源</li> <li>我是资源</li> </ul> <ul class="list"> <li>我是资源</li> <li class="current-both">当前资源</li> <li>我是资源</li> <li>我是资源</li> <li>我是资源</li> </ul> <ul class="list"> <li>我是资源</li> <li class="current-filter">当前资源</li> <li>我是资源</li> <li class="filter">我是资源</li> <li>我是资源</li> </ul></div>
复制代码
.specify-selector { display: flex; .list { outline: 1px solid pink; width: 300px; line-height: 2; font-weight: bold; font-size: 20px; color: black; & + .list { margin-left: 30px; } li { padding: 0 15px; } .current { background-color: blue; color: #fff; & + li { background-color: yellow; color: #fff; } } .current-both { background-color: blue; color: #fff; & ~ li { background-color: yellow; color: #fff; } } .current-filter { background-color: blue; color: #fff; & ~ .filter { background-color: yellow; color: #fff; } } }}
复制代码
好，今天就到这里了，今天努力的你依然是最棒的，Bye Bye！！！
评论