96

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

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

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

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

4

6 回答 6

81

使用 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(item number) 与您的代码相同

.myclass:nth-of-type(1) { };
.myclass:nth-of-type(2) { };
.myclass:nth-of-type(3) { };
于 2012-12-15T02:35:45.687 回答
35

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

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

没有统一的父容器

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

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

于 2011-08-28T09:56:16.003 回答
21

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

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

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

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

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

请特别注意最后一组 3。这里，h3在第一个和第二个元素之间插入了一个未分类的h3.A元素。在这种情况下，没有第 2 种颜色（即橙色）出现，第 3 种颜色（即绿色）出现在 的第 2 个实例上h3.A。这表明ninh3.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>

于 2016-02-24T21:54:47.343 回答
20

是的，你可以这样做。例如，要设置构成表格不同列的 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 */
}
于 2011-10-29T01:13:02.270 回答
10

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

.myclass {
    background: red;
}

.myclass~.myclass {
    background: yellow;
}

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

请参阅我在jsfiddle上的示例

于 2015-01-15T21:19:39.627 回答
1

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

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

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

于 2020-10-07T20:09:53.177 回答