如何在jquery或css中锁定下一个或同级元素？

Question

我有一个问题，想在一个men中锁定下一个元素。

比方说，我们有这样的结构。

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

我的目标是给当前活动元素旁边的每个 "i "或元素一个动画。

我还需要改变它的颜色，或者添加一个闪烁效果来帮助用户理解他们可以点击这个元素。原因是它是一个图标，可能他们没有看到......

我尝试了什么。

我试了css中的+、~，jquery中的.next()、nextAll()等。

EDIT:下面给出的例子在这里展示的简单结构下效果很好，非常感谢您的帮助。

但如果使用bootstrap 4标签，活动类在元素中，所以结构变成了

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

在这种新的结构下，无论我怎么尝试，我都无法改变颜色或在活动类之后的动画...... (第二条)

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

也许你用错了选择器？

下面是一个实际的例子 例子

使用的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

来自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的子元素，它的类是 "active"。

你可以这样做

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