在元素

Question

我有一个列表，我想选择所有＆＃34;类似的＆＃34;元素之后的项目（即具有相同的类）：

<ul>
    <li class="x">foo</li>
    <li class="y" id="b">foo</li> <!-- From this... -->
    <li class="y">foo</li> <!-- ...can I select this?... -->
    <li class="y">foo</li> <!-- ...and this... -->
    <li class="x">foo</li> <!-- ...but not that... -->
    <li class="y">foo</li> <!-- ...and neither that... -->
</ul>

我可以在元素.y之后选择（仅限CSS）所有#b类的元素吗？ 我不知道任何元素的位置（以及有多少元素），我只知道我想要开始的元素的ID（#b）和我想要捕获的类（.y后#b和下一个.x之前的tz。

我可以在CSS中写一些内容来匹配吗？

Answer 1

  在.y

之后

#b

那将是

#b ~ .y

  

在下一个.x

之前

这有点棘手。如果可能存在另一个.x元素，并且您希望避免使用.y元素之后的.x元素，那么您很可能需要一个覆盖规则（在第一个之后）：

#b ~ .y {
  /* Style all .y that follow #b */
}

#b ~ .x ~ .y {
  /* Revert styles for .y that follow the next .x after #b */
}

Answer 2

我为你简化了选择器。我现在使用相邻的选择器，如

.y + .y {
  color: red;
}

Demo

以上选择器只会选择与.y相邻并且class为.y的元素