如何选择具有给定类名的第一个、第二个或第三个元素？

Posted 2023-03-06

【中文标题】如何选择具有给定类名的第一个、第二个或第三个元素？

【英文标题】：How to select the first, second, or third element with a given class name?

【发布时间】：2011-02-14 14:52:36

【问题描述】：

如何在元素列表中选择某个元素？我有以下内容：

<div class="myclass">my text1</div>
<!-- some other code follows -->
<div>
    <p>stuff</p>
</div>
<div>
    <p>more stuff</p>
</div>
<p>
    <span>Hello World</span>
</p>
<div class="myclass">my text2</div>
<!-- some other code follows -->
<div>
    <p>stuff</p>
</div>
<p>
    <span>Hello World</span>
</p>
<input type=""/>
<div class="myclass">my text3</div>
<!-- some other code follows -->
<div>
    <p>stuff</p>
</div>
<footer>The end</footer>

显然，我有适用于所有人的 CSS 类 div.myclass doing things，但我也希望能够像这样选择 .myclass 类的第一个、第二个或第三个 div，无论它们在哪里在标记中：

div.myclass:first color:#000; 
div.myclass:second color:#FFF; 
div.myclass:third color:#006;

几乎像 jQuery 索引选择 .eq( index )，这是我目前使用的，但我需要一个无脚本替代方案。

具体来说，我正在寻找伪选择器，而不是添加另一个类或使用 ID 来使事情正常工作。

【问题讨论】：

CSS 的 nth-child 怎么样，你试过吗....？ 注意：这仅适用于现代浏览器

那个注释似乎是“No IE”的同义词。

@extraneon：是的，你没看错:)

这行不通，因为没有统一的父容器，这就是为什么我想根据类名的出现来选择。我必须查看每一个实例并找出父标签、id 或类才能选择孩子。这样做不会给我带来统一性并且难以阅读，并且如果父对象/属性发生变化也需要更新。

nth-child 现在受 IE 9+ 支持。

【参考方案1】：

使用第 n 个子项（项目编号） 前

<div class="parent_class">
    <div class="myclass">my text1</div>
    some other code+containers...

    <div class="myclass">my text2</div>
    some other code+containers...

    <div class="myclass">my text3</div>
    some other code+containers...
</div>
.parent_class:nth-child(1)  ;
.parent_class:nth-child(2)  ;
.parent_class:nth-child(3)  ;

或

:nth-of-type(项目编号) 和你的代码一样

.myclass:nth-of-type(1)  ;
.myclass:nth-of-type(2)  ;
.myclass:nth-of-type(3)  ;

【讨论】：

-1 您（以及所有支持此答案的人）似乎误解了“其他一些代码+容器”部分。这不是字面上的文字。它是其他元素。如果您在这些元素中有任何其他 div 元素，您的选择器将完全停止工作。

@BoltClock，你的评论最初让我觉得被误导了......直到我进一步调查。请参阅我在同一页面上的“答案”，该页面演示了（我认为）您试图指出的问题。感谢您的专业知识。

【参考方案2】：

您可能在发布这个问题和今天之间终于意识到了这一点，但是选择器的本质使得它无法在层次不相关的 html 元素中导航。

或者，简单地说，因为你在评论中说过

没有统一的父容器

...如果不以其他答案所示的某种方式修改标记，单独使用选择器是不可能的。

您有使用 jQuery .eq() 解决方案。

【讨论】：

是的，我知道 css 的分层问题，但我想这是一厢情愿的想法，我想这还是促使我发布这个问题。

你不必使用 jQuery 的 .eq() 函数，你可以用普通的 javascript 来做这件事：document.querySelector(".myclass")[n] 其中 n 是你想要的数字

@Zach Saucier：这是 5 年前的事了。 （... 4 个半。）

@ZachSaucier * ahem * 您在查询选择器中缺少“All ”?

示例：document.querySelectorAll(".class")[1]

【参考方案3】：

是的，您可以这样做。例如，要设置构成表格不同列的 td 标记的样式，您可以执行以下操作：

table.myClass tr > td:first-child /* First column */

  /* some style here */

table.myClass tr > td:first-child+td /* Second column */

  /* some style here */

table.myClass tr > td:first-child+td+td /* Third column */

  /* some style here */

【讨论】：

也许第 n 个孩子会是更好的解决方案：w3.org/TR/selectors/#nth-child-pseudo

-1 该问题询问关于选择一组具有类名的不相关元素中的第 n 个，而不是第 n 个子元素。

【参考方案4】：

这与其说是一个答案，不如说是一个非答案，即说明为什么 one of the highly voted answers above 实际上是错误的示例。

我认为这个答案看起来不错。事实上，它给了我想要的东西：:nth-of-type，就我的情况而言，它有效。 （所以，谢谢你，@Bdwey。）

我最初阅读了@BoltClock 的评论（它说答案基本上是错误的）并驳回了它，因为我检查了我的用例，并且它有效。然后我意识到@BoltClock 拥有超过 300,000 的声誉（！）并且有一个他声称是 CSS 大师的个人资料。嗯，我想，也许我应该仔细看看。

结果如下：div.myclass:nth-of-type(2) 并不意味着“div.myclass 的第二个实例”。相反，它的意思是“div 的第二个实例，它还必须有 'myclass' 类”。当您的 div.myclass 实例之间存在干预 divs 时，这是一个重要的区别。

我花了一些时间来解决这个问题。所以，为了帮助其他人更快地弄清楚，我写了一个例子，我相信它比书面描述更清楚地展示了这个概念：我劫持了h1、h2、h3 和 h4元素本质上是divs。我在其中一些上放置了A 类，将它们分组为3，然后使用h?.A:nth-of-type(?) 将第一个、第二个和第三个实例着色为蓝色、橙色和绿色。 （但是，如果你仔细阅读，你应该问“什么的第一个、第二个和第三个实例？”）。我还在一些组中插入了一个不同的（即不同的h 级别）或类似的（即相同的h 级别）未分类元素。

请特别注意最后一组 3。这里，在第一个和第二个 h3.A 元素之间插入了一个未分类的 h3 元素。在这种情况下，不会出现第 2 种颜色（即橙色），而第 3 种颜色（即绿色）会出现在 h3.A 的第 2 个实例上。这表明h3.A:nth-of-type(n) 中的n 计算的是h3s，而不是h3.As。

嗯，希望对您有所帮助。谢谢@BoltClock。

div 
  margin-bottom: 2em;
  border: red solid 1px;
  background-color: lightyellow;


h1,
h2,
h3,
h4 
  font-size: 12pt;
  margin: 5px;


h1.A:nth-of-type(1),
h2.A:nth-of-type(1),
h3.A:nth-of-type(1) 
  background-color: cyan;


h1.A:nth-of-type(2),
h2.A:nth-of-type(2),
h3.A:nth-of-type(2) 
  background-color: orange;


h1.A:nth-of-type(3),
h2.A:nth-of-type(3),
h3.A:nth-of-type(3) 
  background-color: lightgreen;

<div>
  <h1 class="A">h1.A #1</h1>
  <h1 class="A">h1.A #2</h1>
  <h1 class="A">h1.A #3</h1>
</div>

<div>
  <h2 class="A">h2.A #1</h2>
  <h4>this intervening element is a different type, i.e. h4 not h2</h4>
  <h2 class="A">h2.A #2</h2>
  <h2 class="A">h2.A #3</h2>
</div>

<div>
  <h3 class="A">h3.A #1</h3>
  <h3>this intervening element is the same type, i.e. h3, but has no class</h3>
  <h3 class="A">h3.A #2</h3>
  <h3 class="A">h3.A #3</h3>
</div>

【讨论】：

哈哈，我承认我的个人资料有点半开玩笑......但这甚至不是我评论的答案的问题 - 问题是它需要“一些其他代码+containers...” 文本完全是字面意思，当它显然是指其他实际干预元素时，这会干扰 :nth-child() 匹配（再看一遍，由于完全不同的原因，它们都写错了)。但正如您所发现的， :nth-of-type() 是一种不同的野兽......

另外，更多关于 :nth-child()、:nth-of-type() 和我的其他答案中的任意选择器：***.com/questions/5545649/…***.com/questions/24657555/…

【参考方案5】：

也许使用 CSS 的“~”选择器？

.myclass 
    background: red;


.myclass~.myclass 
    background: yellow;


.myclass~.myclass~.myclass 
    background: green;

在jsfiddle上查看我的示例

【讨论】：

这仅适用于兄弟元素，而不适用于 OP 要求的内容（无论标记如何）

但它在编写 React Jest 单元测试时很方便，其中伪选择器不起作用。所以，谢谢，Netsi1964

【参考方案6】：

将来（也许）您将能够使用:nth-child(an+b of s)

实际上，浏览器对“of”过滤器的支持非常有限。似乎只有 Safari 支持该语法。

https://css-tricks.com/almanac/selectors/n/nth-child/