Question

我有以下html

<ul class="main"> ... </ul>
<div class="submain">...</div>  --> select this
<div class="submain">...</div>
<div class="submain">...</div>

...

<ul class="main"> ... </ul>
<div class="submain">...</div>  --> select this
<div class="submain">...</div>
<div class="submain">...</div>

如何选择main之后的所有第一个submain元素。

Answer 1

您可以这样做

在这种情况下，您需要选择该类的同级，以便可以使用+选择器来实现。

The element+element selector is used to select elements that is placed immediately after (not inside) the first specified element. 您可以在 Adjacent sibling combinator

中阅读更多内容

.main + .submain{
  color:green;
  background:'blue';
}

<ul class="main"> ... </ul>
<div class="submain">Selected</div>  --> select this
<div class="submain">...</div>
<div class="submain">...</div>

...

<ul class="main"> ... </ul>
<div class="submain">Selected</div>  --> select this
<div class="submain">...</div>
<div class="submain">...</div>

Answer 2

正如Code Maniac所说-使用“ +”组合器选择相邻的兄弟姐妹。从我这里，我将为您提供CSS组合器工作方式的文档链接： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#Combinators

CSS Slector jQuery：如何在特定类之后选择类的首次出现

2 个答案: