如何在给定元素之前编写用于选择元素的css选择器[重复]

Question

我在一个包装器 div 中有两个元素。视图中的第二个兄弟有时会获得一个活动类（根据 UI 的逻辑）

   <div id="wrapper">
     <div>some content</div>
     <div class="active">some other content</div>
   </div>

在这些情况下（当第二个孩子有一个活跃的班级时） - 我如何从 css 选择器中定位第一个 div。

我已经尝试过活动 div 的一般兄弟

.active ~ div

但这不起作用，因为目标 div 应该在选定的 div 之后，而不应该在它之前。

如何定位 在另一个活动 div 之前的 div。

Answer 1

您可以定位不活动的 div（在包装类内部）

.wrapper {
  > div:not([class='active']) {
    // apply styles 
  }
}