相邻兄弟选择器（+）

r囧r小猫 2022-07-28 06:23 108阅读 0赞

今天在做导航栏的时候，需求里面需要实现一个小的动画效果，需求：导航栏中，鼠标移入每个链接，链接字体颜色发生改变，同时导航栏下面的小点圆圈移动到相对应的位置。因为需要兼容IE8的缘故，动画使用JQuery的animation函数来实现的。当完成导航栏的制作后，我突发奇想如果不需要用到任何JS是否可以实现该动画。  
先看下测试中导航栏的代码

> HTML

<div class="nav">
        <ul>
            <li class="a">第一个导航</li>
            <li class="b">第二个导航</li>
            <li class="c">第三个导航</li>
            <li class="circle"></li>
        </ul>
    </div>

> CSS

li{ display: inline-block;margin: 0 20px;padding: 20px 40px;}
        .nav{ position: relative;}
        .circle{ position: absolute;left: 100px;bottom: -10px;background-color: #ccc; width: 10px;height: 10px;border-radius: 10px;transition: all 1s;padding: 0;}
        .a{ background-color: red;}
        .b{ background-color: orange;}
        .c{ background-color: pink;}
        li:hover{ cursor: pointer;background-color: red;}

导航栏的初样  
![这里写图片描述][20160331162946301]

> 如何在不使用JS的条件下实现鼠标悬停，控制红色小点的运动。

CSS伪类：hover可以实现父元素控制子元素的样式变换。如果需要控制同胞元素的变换，该如何选择，这边就需要用到相邻兄弟选择器（+）；

相邻兄弟选择器：如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。  
这句话是w3c的解释，意思是如果需要用到相邻兄弟选择器，那么需要满足它的条件：二者有相同的父元素。

> 如何理解相邻兄弟选择器（+）

以上面的测试Demo为例子，来解释下相邻兄弟选择器（+）。

标签ul中的li标签拥有共同的父亲，它们是兄弟元素。相邻兄弟，第一个和第二个相邻，那么它们是相邻兄弟，第一个和第三个不相邻，那么它们不是相邻兄弟。CSS伪类：hover中，使用相邻兄弟选择器，可以控制相邻兄弟的样式变换。

例如：测试Demo

![这里写图片描述][20160331165545561]

结果表示：CSS伪类：hover中，使用相邻兄弟选择器，可以控制相邻兄弟的样式变换。  
      那么如果倒过来用 f来控制d是否可行？结果是不可以的，大家可以自己尝试下。了解了相邻兄弟选择器（+）的作用，那么如何来实现控制不想邻的兄弟元素呢。下面用最开始导航栏的代码为例，来实现鼠标移入不同导航，而运动circle小球，通过实现这个效果后，想必应该对它会有跟进一步的理解。

> 如何实现小球随着鼠标悬停而运动

.a + .b:hover + .c + .circle{ left: 300px;}
        .a + .b + .c:hover + .circle{ left: 500px;}

在样式表中添加上面的样式，即可实现小球随着鼠标悬停在不同的导航位置而运动。

Demo可以简写

.b:hover + .c + .circle{ left: 300px;}
        .c:hover + .circle{ left: 500px;}

通过简写可以发现，为了控制隔行的兄弟，必须先找到被控制元素的相邻兄弟元素，这样才能实现鼠标悬停的效果。

由于相邻兄弟选择器（+）的兼容性，实现鼠标悬停动画，还是采用JS的控制来实现为最佳，当然如果项目是属于移动端的，可以还不犹豫的使用相邻兄弟选择器（+），来实现一些动画的效果。毕竟老版本的浏览器迟早有一天会被淘汰的，大家在多尝试使用新的特性，个人一小步，促进前端的一大步。

[20160331162946301]: /images/20220727/0c9bea148fc3458bba94400944e6b80a.png
[20160331165545561]: /images/20220727/37ca2bb9121a411ea7821c09a3af83f3.png