如何选择某些DOM元素后面元素

Question

给定以下标记:

<div class="wrapper">

  <div class="inner-wrapper">
    <div class="first">
      <div class="second">
      </div>
    </div>
</div>

 <hr class="separator">

<div class="inner-wrapper">
    <div class="first">
      <div class="second">
      </div>
    </div>
</div>

</div>

如何在。分隔符后选择类。first和。second？我尝试了以下几点:

.wrapper .separator + .inner-wrapper .first

然而，这似乎并不奏效。我以为这是这样的，从左到右:

Select ".separator" that has ".wrapper" as parent.
Select ".inner-wrapper" that follows after ".separator"
Select ".first" that follows ".inner-wrapper"

既然它不能工作，我想我误解了其中一个选择器的功能。感谢任何帮助（或这方面的替代方案）。

PS:

标记来自外部源。虽然我可以在技术上用JS添加一个类，但如果可能的话，我更倾向于不添加。我也尝试过使用“:not”选择器，但我也没有得到它的工作。

谢谢

编辑:

在屏幕截图中，在“header”容器内，有相同的构造，因此有一个带有inner-wrapper，first等的容器。https://i.stack.imgur.com/cdkej.png

Answer 1

使用选择它

例如:

seperator ~ inner-wrapper first,seperator ~ inner-wrapper first second{
}

Answer 2

null

.wrapper .separator + .inner-wrapper .first, .wrapper .separator + .inner-wrapper .second

或更好:

.wrapper .separator + .inner-wrapper :is(.first,.second)

null