css - 定位 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/