css - 有没有办法选择多个相邻的类？

Question

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

换句话说，假设我们有

<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;}

它将选择上面的“二”和“三”，但不会选择“四”，因为它前面有一个 div，其类不是 item。

Answer 1

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

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

• How can I target a specific group of siblings in a flat hierarchy?
• CSS rule for no matching general sibling

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