javascript - 仅在当前 div 之前将 CSS 应用于容器中的所有 div

Question

假设我们有这样的布局:

<div id="container">

    <div></div>
    <div></div>
    <div class="current"></div>
    <div></div>
    <div></div>

</div>

使用一些 CSS:

#container div {
  width: 20px;
  height: 20px;
}

如何使类 current 之前和包括 div(在 #container 内)的所有 div 具有相同的背景颜色，例如背景:番茄；？并在 class="current" 所在的 div 发生变化时更新？

因此在上面的示例中，容器中的前 3 个 div 将具有番茄背景色。

Answer 1

您可以使用 general sibling selector .

#container div {
  width: 20px;
  height: 20px;
  
  background-color:tomato;
}

#container .current ~ div {
  background-color:transparent;
}

<div id="container">

    <div>1</div>
    <div>2</div>
    <div class="current">3</div>
    <div>4</div>
    <div>5</div>

</div>