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旁边的元素上给出动画。我的目标是改变颜色，或添加一个闪烁效果，以帮助用户了解他们可以点击元素，因为它是一个图标，也许他们没有看到它... 在jquery中用+，〜在css和.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

我认为你正在寻找这个：

＆＃13;

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

＆＃13;

<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>

＆＃13;

或许这个：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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的子元素。

你可以这样做

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.0.0.RELEASE</version>

    <relativePath />
</parent>

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

4 个答案: