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

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

<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>

div.myclass {doing things}很明显，我有适用于所有类的CSS类，但是我也希望能够选择.myclass此类的第一，第二或第三div ，而不管它们在标记中的位置：

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

几乎类似于jQuery索引选择.eq( index )，这是我当前正在使用的选择，但是我需要一个无脚本的替代方法。

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

您可能最终在发布此问题与今天之间就意识到了这一点，但是选择器的本质使其无法浏览与层次结构无关的HTML元素。

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

没有统一的父容器

...仅使用选择器是不可能的，而不能像其他答案所示那样以某种方式修改标记。

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

使用nth-child（项目编号）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) { };

要么

：nth-​​of-type（项目编号）与您的代码相同

.myclass:nth-of-type(1) { };
.myclass:nth-of-type(2) { };
.myclass:nth-of-type(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 */
}

这不是一个无答案的答案，而是一个示例，说明了为什么上面被高度投票的答案之一实际上是错误的。

我认为答案看起来不错。实际上，它满足了我的需求：:nth-of-type就我的情况而言，哪种方法有效。（因此，感谢@Bdwey。）

最初，我阅读了@BoltClock的评论（它说答案本质上是错误的），并将其消除了，因为我已经检查了用例，并且它起作用了。然后我意识到@BoltClock有300,000+（！）的声誉，并且拥有他声称是CSS专家的个人资料。嗯，我想，也许我应该再靠近一点。

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

我花了一些时间来解决这个问题。因此，要在帮助别人更快地算起来，我已经写了，我认为体现了概念更清晰比书面说明一个例子：我劫持了h1，h2，h3和h4元素基本上是div秒。我A在其中一些上放了一个类，将它们分组为3，然后使用分别将第一，第二和第三实例着色为蓝色，橙色和绿色h?.A:nth-of-type(?)。（但是，如果您仔细阅读，应该问“什么的第一，第二和第三实例？”）。我也将不相似（即不同h级别）或相似（即相同h级别）的未分类元素插入到某些组中。

特别要注意的是最后一组3。这里，未分类的h3元素插入到第一和第二h3.A元素之间。在这种情况下，没有第二种颜色（即橙色）出现，并且第三种颜色（即绿色）出现在的第二个实例上h3.A。这表明nin在h3.A:nth-of-type(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>

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

.myclass {
    background: red;
}

.myclass~.myclass {
    background: yellow;
}

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

参见我在jsfiddle上的示例

将CSSnth-child与前缀类名一起使用

div.myclass:nth-child(1) {
  color: #000;
}

div.myclass:nth-child(2) {
  color: #FFF;
}

div.myclass:nth-child(3) {
  color: #006;
}

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

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

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