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

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>

我有一个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来使事情有效.

Answer 1

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

Answer 2

您可能最终在发布此问题和今天之间实现了这一点,但选择器的本质使得无法浏览分层不相关的HTML元素.

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

没有统一的父容器

...如果没有像其他答案所示的某种方式修改标记,那么单独使用选择器是不可能的.

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

Answer 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 */
}

Answer 4

这不是一个非答案的答案,即一个例子,说明为什么上面一个高度投票的答案实际上是错误的.

我认为答案看起来不错.事实上,它给了我正在寻找的东西::nth-of-type对于我的情况,它起作用了.(所以,谢谢你,@Bdwey.)

我最初阅读@BoltClock的评论(它说答案本质上是错误的)并且驳回了它,因为我检查了我的用例,并且它有效.然后我意识到@BoltClock的声誉为300,000+(!)并且有一个他声称自己是CSS大师的个人资料.嗯,我想,也许我应该看得更近一点.

结果如下:div.myclass:nth-of-type(2)不代表"div.myclass的第二个实例".相反,它意味着"div的第二个实例,它也必须具有'myclass'类".当div你的div.myclass实例之间存在介入时,这是一个重要的区别.

我花了一些时间来解决这个问题.因此,为了帮助别人更快地算起来,我已经写了,我认为体现了概念更清晰比书面说明一个例子:我劫持了h1,h2,h3和h4元素基本上是div秒.我A在其中一些上面放了一个类,将它们分成3个,然后使用蓝色,橙色和绿色将第1,第2和第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>

Answer 5

也许使用CSS的"〜"选择器？

.myclass {
    background: red;
}

.myclass~.myclass {
    background: yellow;
}

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

在jsfiddle上查看我的示例