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>

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

像...

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

它会选择上面的“两个”和“三个”，但不会选择“四个”，因为它前面有一个除item以外的类的div。

Answer 1

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

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

似乎如果您正在使用纯CSS解决方案，您需要提前知道有多少.item元素可以分隔两个.marker元素，并且硬编码为相同的兄弟必要时选择器，如Josh Crozier's answer所示。如果您事先不知道这一点，则需要以某种方式使用JavaScript。

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

有没有办法选择多个相邻的班级？

2 个答案: