提问者:小点点

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


给定以下标记:

<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


共2个答案

匿名用户

null

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

或更好:

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

null

匿名用户

使用选择它

例如:

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