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

Question

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

<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} 显然适用于所有内容，但我也希望能够选择类的第一个、第二个或第三个 div .myclass 像这样，无论它们在标记中的位置：

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

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

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

Answer 1

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

<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) { };

OR

:第 n 个类型（项目编号）
与你的代码相同

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

Answer 2

从发布这个问题到今天，您可能终于意识到了这一点，但是选择器的本质使得不可能在分层不相关的 HTML 元素中导航。

或者，简单地说，既然您在评论中说

没有统一的父容器

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

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

Answer 3

这与其说是一个答案，不如说是一个非答案，即一个示例，说明为什么上面得到高度评价的答案之一实际上是错误的。

我觉得这个答案看起来不错。事实上，它给了我我正在寻找的东西：:nth-of-type，这对于我的情况来说是有效的。 （所以，谢谢@Bdwey。）

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

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

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

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

Answer 4

是的，你可以这样做。例如，要设置构成表格不同列的 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 */
}

Answer 5

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

.myclass {
    background: red;
}

.myclass~.myclass {
    background: yellow;
}

.myclass~.myclass~.myclass {
    background: green;
}

请参阅我的示例 jsfiddle

Answer 6

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

在您的情况下，它将是 :nth-child(-n+3 of . myclass)

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

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