在CSS中的第一个活动元素之后定位第一个可见元素

Question

在这里进入一些非常粗糙的CSS.在下面的场景中,我想只匹配#4.这是我发生的事情:

<ul class="tabMenu">
  <li class="hidden">1</li>
  <li class="active">2</li>
  <li class="hidden">3</li>
  <li>4</li> <!-- I want this one's blood -->
  <li class="hidden">5</li>
  <li class="hidden">6</li>
  <li>7</li>
  <li class="hidden">8</li>
  <li>9</li>
</ul>

以下是我的失败尝试:

/* Only matches the next immediate li (so it works if #3 is not hidden) */
.tabMenu li:not(.hidden).active + li:not(.hidden) a {
  color: red;
}

/* Matches #4 and #7, I just want #4 */
.tabMenu li:not(.hidden).active ~ li:not(.hidden) a {
  color: red;
}

30分钟后,我决定将问题提交给你.请帮忙!

Answer 1

利用CSS兄弟选择器的工作方式将是这里的方式.

• 步骤1:让我们在第active一个不包含类hidden或者的元素之后执行所有元素的选择active.

  li.active ~ li:not(.hidden):not(.active) {
      color:red;
  }
  

• 第2步:让我们在目标元素之后删除所有兄弟姐妹的目标.CSS选择器~选择后面的所有兄弟元素,而不包括它.因此,通过将其应用于li目标之后的元素,我们成功地从除步骤1中的第一个之外的所有元素中移除.

  li.active ~ li:not(.hidden):not(.active) ~ li {
      color:inherit;
  }
  

请参阅:http://jsfiddle.net/nJHd2/