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

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

我的文本1
东西

更多的东西


你好，世界

我的短信2
东西


你好，世界

我的短信3
东西

结局

我的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使事情正常工作这样的事情

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

或者，简单地说，既然你在评论中说

没有统一的父容器

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

---

您必须使用jQuery

.eq（）

解决方案。

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

使用第n个子项（项目编号） 前

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

.myclass {
    background: red;
}

.myclass~.myclass {
    background: yellow;
}

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

---

参见我在

上的示例这与其说是一个答案，不如说是一个非答案，也就是说，这是一个说明为什么实际上是错误的示例

我觉得这个答案看起来不错。事实上，它给了我我想要的东西：

：第n种类型的

，在我的情况下，它是有效的。（所以，谢谢你，@Bdwey。）

我最初读了@BoltClock的评论（它说答案基本上是错误的），然后驳回了它，因为我已经检查了我的用例，它成功了。然后我意识到@BoltClock有300000+（！）的声誉，并且有一个他自称是CSS大师的个人资料。嗯，我想，也许我应该看近一点

结果如下：

div.myclass:nth类型（2）

并不意味着“div.myclass的第二个实例”。相反，它的意思是“div的第二个实例，并且它还必须具有'myclass'类”。当您的

div.myclass

实例之间存在干涉

div

s时，这是一个重要的区别

我花了一些时间才明白这一点。因此，为了帮助其他人更快地理解它，我写了一个例子，我相信它比一个书面描述更清楚地说明了这个概念：我劫持了

h1

、

h2

、

h3

和

h4

元素本质上是

div

s。我在其中一些实例上设置了

A

类，将它们分为3类，然后使用

h？.A:n类型（？）

将第一、第二和第三个实例涂成蓝色、橙色和绿色。（但是，如果你仔细阅读，你应该问“什么的第一、第二和第三个例子？”）。我还将一个不同的（即不同的

h

level）或类似的（即相同的

h

level）未分类元素插入到一些组中

请特别注意最后一组3。这里，在第一个和第二个

h3.A

元素之间插入未分类的

h3

元素。在这种情况下，不会出现第二种颜色（即橙色），第三种颜色（即绿色）显示在

h3.A

的第二个实例上。这表明

h3.A中的
n
（n）

类型的第n个是计算

h3

s，而不是

h3.A

s

希望能有帮助。“谢谢你，”博尔顿说

div{
边缘底部：2米；
边框：红色实心1px；
背景颜色：浅黄色；
}
h1，
h2，
h3，
h4{
字号：12号；
保证金：5px；
}
h1.A：第n种类型（1），
h2.A：第n种类型（1），
h3.A：第n种类型（1）{
背景色：青色；
}
h1.A：第n种类型（2），
h2.A:n第（2）类，
h3.A：第n种类型（2）{
背景颜色：橙色；
}
h1.A：第n种类型（3），
h2.A：第n种类型（3），
h3.A：第n种类型（3）{
背景颜色：浅绿色；
}

h1.A#1
h1.A#2
h1.A#3
h2.A#1
该中间元素是另一种类型，即h4而不是h2
h2.A#2
h2.A#3
h3.A#1
该中间元素为相同类型，即h3，但没有类别
h3.A#2
h3.A#3

将来（也许）您将能够使用

：第n个孩子（s的A+b）

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

---

CSS如何，您是否尝试过。。。。？注意：这只适用于现代浏览器该注意似乎是“No IE”的同义词。@extranon:Yup，你说得对：）这不起作用，因为没有统一的父容器，这就是为什么我更希望根据类名进行选择。我必须查看每个实例，找出父标记、id或类，以便选择子项。这样做不会给我带来一致性，而且很难阅读，如果父对象/属性发生变化，也需要更新。nth-child现在受IE 9+支持。是的，我知道css的层次结构问题，但我想这是一厢情愿的想法促使我无论如何发布此que。你不必使用jQuery的

.eq（）

函数，您可以很好地使用普通JavaScript:

document.querySelector（“.myclass”）[n]

其中n是您需要的数字want@Zach这是5年前的事了。（…4.5.）@zachsauier*ahem*您的查询选择器缺少“All”示例：document.queryselectoral（“.class”）[1]也许第n个孩子会是一个更好的解决方案：-1问题询问如何选择nt

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

.myclass {
    background: red;
}

.myclass~.myclass {
    background: yellow;
}

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