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}，很明显，但我也希望能够像这样选择类.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) { };

OR

：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

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

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

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

结果如下：div.myclass:nth-of-type(2)并不意味着＆＃34; div.myclass＆＃34;的第二个实例。相反，它意味着＆＃34; div的第二个实例，它还必须具有＆＃39; myclass＆＃39;类＆＃34 ;.当div个实例之间存在干扰div.myclass时，这是一个重要的区别。

我花了一些时间来解决这个问题。所以，为了帮助其他人更快地弄明白，我写了一个例子，我相信这个概念比书面描述更清楚地表明了这个概念：我已经劫持了h1，h2 ，h3和h4元素基本上为div个。我已经在其中一些上加了A课，将它们分组为3，然后使用h?.A:nth-of-type(?)将第一，第二和第三个实例着色为蓝色，橙色和绿色。（但是，如果您仔细阅读，那么您应该询问＆＃34;第1，第2和第3个实例？＆＃34;）。我还将一个不同的（即不同的h级别）或类似的（即相同的h级别）未被分类的元素插入到某些组中。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

也许使用＆＃34;〜＆＃34; CSS的选择器？

.myclass {
    background: red;
}

.myclass~.myclass {
    background: yellow;
}

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

请参阅jsfiddle

上的示例

Answer 6

使用CSS nth-child和前缀类名

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

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

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

Answer 7

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

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

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

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

7 个答案: