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

How to select the first, second, or third element with a given class name?

提问by Tumharyyaaden

How can I select a certain element in a list of elements? I have the following:

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

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

I have the CSS class div.myclass {doing things}that applies to all, obviously, but I also wanted to be able to select the first, second, or third div of class .myclasslike this, regardless of where they are in the markup:

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

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

Almost like the jQuery index selection .eq( index ), which is what I am using currently, but I need a no-script alternative.

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

To be specific, I am looking for pseudo selectors, not things like adding another class or using IDs to make things work.

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

采纳答案by BoltClock

You probably finally realized this between posting this question and today, but the very nature of selectors makes it impossible to navigate through hierarchically unrelated HTML elements.

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

Or, to put it simply, since you said in your comment that

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

there are no uniform parent containers

没有统一的父容器

... it's just not possible with selectors alone, without modifying the markup in some way as shown by the other answers.

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

You haveto use the jQuery .eq()solution.

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

回答by Bdwey

use nth-child(item number) EX

使用 nth-child(item number) 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

或者

:nth-of-type(item number) same your code

:nth-of-type(item number) 与您的代码相同

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

回答by David

Yes, you can do this. For example, to style the td tags that make up the different columns of a table you could do something like this:

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

回答by Andrew Willems

This isn't so much an answer as a non-answer, i.e. an example showing why one of the highly voted answers aboveis actually wrong.

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

I thought that answer looked good. In fact, it gave me what I was looking for: :nth-of-typewhich, for my situation, worked. (So, thanks for that, @Bdwey.)

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

I initially read the comment by @BoltClock (which says that the answer is essentially wrong) and dismissed it, as I had checked my use case, and it worked. Then I realized @BoltClock had a reputation of 300,000+(!) and has a profile where he claims to be a CSS guru. Hmm, I thought, maybe I should look a little closer.

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

Turns out as follows: div.myclass:nth-of-type(2)does NOT mean "the 2nd instance of div.myclass". Rather, it means "the 2nd instance of div, and it must also have the 'myclass' class". That's an important distinction when there are intervening divs between your div.myclassinstances.

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

It took me some time to get my head around this. So, to help others figure it out more quickly, I've written an example which I believe demonstrates the concept more clearly than a written description: I've hiHymaned the h1, h2, h3and h4elements to essentially be divs. I've put an Aclass on some of them, grouped them in 3's, and then colored the 1st, 2nd and 3rd instances blue, orange and green using h?.A:nth-of-type(?). (But, if you're reading carefully, you should be asking "the 1st, 2nd and 3rd instances of what?"). I also interjected a dissimilar (i.e. different hlevel) or similar (i.e. same hlevel) un-classed element into some of the groups.

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

Note, in particular, the last grouping of 3. Here, an un-classed h3element is inserted between the first and second h3.Aelements. In this case, no 2nd color (i.e. orange) appears, and the 3rd color (i.e. green) shows up on the 2nd instance of h3.A. This shows that the nin h3.A:nth-of-type(n)is counting the h3s, not the h3.As.

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

Well, hope that helps. And thanks, @BoltClock.

嗯，希望有帮助。谢谢，@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>

回答by Netsi1964

Perhaps using the "~" selector of CSS?

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

.myclass {
    background: red;
}

.myclass~.myclass {
    background: yellow;
}

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

See my example on jsfiddle

请参阅我在jsfiddle上的示例