css selector jquery：如何在特定类之后选择第一次出现的类

Posted 2023-05-09

【中文标题】css selector jquery：如何在特定类之后选择第一次出现的类

【英文标题】：css slector jquery: how to select first occurance of class after a particular class

【发布时间】：2019-05-16 11:10:51

【问题描述】：

我有以下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 元素。

【参考方案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>

【参考方案2】：

正如 Code Maniac 所说 - 使用“+”组合符来选择相邻的兄弟姐妹。从我这里，我会给你链接到 CSS 组合器如何工作的文档： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#Combinators