给定以下标记:
<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
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{
}