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或{{1} }。
```
active
```
第2步：让我们在目标元素之后删除所有兄弟姐妹的目标。 CSS选择器li.active ~ li:not(.hidden):not(.active) { color:red; }选择后面的所有兄弟元素，而不包括它。因此，通过将其应用于目标之后的~元素，我们成功地删除了中的所有元素，除了在步骤1中定位的第一个元素。

li

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

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

1 个答案: