是否可以从特定类别中选择所有兄弟姐妹div到下一个？

Question

是否有机会选择所有兄弟姐妹，直到下一个特定的班级.parent？

在我们的例子中，我们有一个Div列表，HTML中没有层次结构，它们都处于同一级别。我们无权更新HTML结构。

<div class="parent"></div>
<div></div>
<div></div>
<div></div>
<div class="parent"></div>
<div></div>
<div class="parent"></div>
<div></div>
<div></div>
<div class="parent"></div>
<div></div>
<div></div>

例如，可以选择父母和孩子并添加其他颜色吗？

Answer 1

您可以使用~选择器和:not()选择器，因此只能重新设置.parent之间的元素的样式。

示例

.parent~div:not(.parent) {
  background:lightblue;
  margin: 0.5em;
}

/* for demo */
body {
  counter-reset: divs
}

div:before {
  counter-increment: divs;
  content: counter(divs)
}

<div class="parent"></div>
<div></div>
<div></div>
<div></div>
<div class="parent"></div>
<div></div>
<div class="parent"></div>
<div></div>
<div></div>
<div class="parent"></div>
<div></div>
<div></div>