试图瞄准下一个或兄弟元素

Question

我有一个问题试图用css或jquery来定位菜单中的下一个元素让我们说我们有这个结构

<ul>
<li class="active"><a href=""><i class=""></i></a></li>
<li><a href=""><i class=""></i></a></li>
</ul>

我的目标是在每个i或当前活动li旁边的元素上给出动画。我的目标是改变颜色，或添加一个闪烁效果，以帮助用户了解他们可以点击元素，因为它是一个图标，也许他们没有看到它...尝试用+，〜在CSS，和。 jquery中的next（），nextAll（）等..

编辑：下面给出的示例与此处显示的简单结构配合得很好，非常感谢您的帮助。但是使用bootstrap 4选项卡，活动类位于元素中，因此结构变为

<ul>
<li><a href="" class="active"><i class=""></i></a></li>
<li><a href=""><i class=""></i></a></li>
</ul>

并且使用这种新结构，无论我尝试什么，我无法设法改变颜色或活动后的活动类......（第二个li）

Answer 1

我想你正在寻找这个：

li.active ~ li > a {
color:red;
}
li.active ~ li > a >i {
color:green;
}

<ul>
<li><a href=""><i class="">icon</i>link</a></li>
<li class="active"><a href=""><i class="">icon</i>link active</a></li>
<li><a href=""><i class="">icon</i>link</a></li>
<li><a href=""><i class="">icon</i>link</a></li>
<li><a href=""><i class="">icon</i>link</a></li>
</ul>

或许这个：

li.active + li > a {
color:red;
}
li.active + li > a >i {
color:green;
}

<ul>
<li><a href=""><i class="">icon</i>link</a></li>
<li class="active"><a href=""><i class="">icon</i>link active</a></li>
<li><a href=""><i class="">icon</i>link</a></li>
<li><a href=""><i class="">icon</i>link</a></li>
<li><a href=""><i class="">icon</i>link</a></li>
</ul>

Answer 2

也许你用错误的选择器？

这是一个真正的example

使用的Css是：

// Targets the next one to active
li.active + li a  {
}

// Targets next one and all after that, after active
li.active ~ li a {

}

Answer 3

From CSS-tricks.com：

相邻的兄弟组合子选择器允许您选择直接在另一个特定元素之后的元素。

p + p { font-size: smaller; }
// Selects all paragraphs that follow another paragraph
#title + ul { margin-top: 0; }
// Selects an unordered list that directly follows the element with ID title

Answer 4

我想你想要定位具有“活跃”类的li的子元素。

你可以这样做

li.active a {
    /*your style goes here*/
}
li.active i {
    /*your style goes here*/
}