有没有办法选择多个相邻的类？答案

【问题标题】：Is there a way of selecting multiple adjacent classes?有没有办法选择多个相邻的类？
【发布时间】：2015-02-27 01:49:12
【问题描述】：

有没有办法选择多个（即“任意数量”）相邻的类？

换句话说，假设我们有

<div class="marker">One</div>
<div class="item"></div>
<div class="marker">Two</div>
<div class="item"></div>
<div class="item"></div>
<div class="marker">Three</div>
<div class="item"></div>
<div class="interruption"></div>
<div class="item"></div>
<div class="marker">Four</div>

我想选择任意数量的“标记”，但仅“项目”元素

喜欢...

.marker + .item + .marker { display:block;}

它将选择上面的“二”和“三”，而不是“四”，因为它前面有一个除item之外的类。

【问题讨论】：

基本没有...CSS不能检测前面的元素。

标签： css css-selectors

【解决方案1】：

CSS 不提供一次代表多个相邻兄弟的选择器。每个选择器只代表一个元素；如果您需要表示多个兄弟姐妹，则需要相同数量的相邻兄弟选择器。

似乎没有办法表示 .marker 其一般前面的兄弟元素也不匹配某个选择器，这可能与 CSS 无法在有限范围内选择兄弟元素有关。请参阅以下相关问题：

看来，如果您追求纯 CSS 解决方案，您需要提前知道有多少 .item 元素可以分隔两个 .marker 元素，并根据需要硬编码尽可能多的相邻兄弟选择器，如Josh Crozier's answer 所示。如果您事先不知道这一点，您将需要以某种方式使用 JavaScript。

【讨论】：

我可能遗漏了一些东西，但我的答案真的是硬编码相邻的兄弟选择器吗？它应该与这 2 个选择器一起使用任何数量的分隔 .item 元素（我认为？）。
@Josh Crozier：哦，我看的不够仔细。我想说你仍然假设.interruption 与下一个.item 元素的出现不会少于两个.marker，我们不确定。无论哪种方式，它都需要提前了解结构。
是的，你完全正确。我没有考虑到这一点。
@Josh Crozier：不幸的是，一旦在.interruption 之后的元素之后有其他.marker 元素，覆盖就会停止工作。由于我想考虑这种情况，我已经编辑了我的答案以完全删除最重要的解决方法。

【解决方案2】：

如果您知道.interruption 元素只会连续出现一次，那么您可以将选择器.marker + .item + .marker 与.marker ~ .item + .item + .marker 结合使用以实现此目的。

如果不是这种情况，那么您需要将初始 CSS 覆盖为 BoltClock suggests。

.marker + .item + .marker,
.marker ~ .item  + .item + .marker {
    color: red;
}

<div class="marker">One</div>
<div class="item"></div>
<div class="marker">Two</div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="marker">Three</div>
<div class="item"></div>
<div class="interruption"></div>
<div class="item"></div>
<div class="marker">Four</div>

【讨论】：

对不起，我稍微澄清了我的问题......这将选择一些不需要的 div。
不，我不想选择“四”