如何select给定类名的第一，第二或第三个元素？
我如何select元素列表中的某个元素？ 我有以下几点：
<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}适用于所有，显然，但我也希望能够select这样的类.myclass的第一，第二或第三个div， 不pipe它们在哪里标记 ：
div.myclass:first {color:#000;} div.myclass:second {color:#FFF;} div.myclass:third {color:#006;}
几乎像jQuery索引select.eq( index ) ，这是我目前正在使用，但我需要一个无脚本替代。
具体而言，我正在寻找伪select器，而不是像添加另一个类或使用ID来使事情工作的东西。
您可能最终意识到发布这个问题和今天之间的这一点，但select器的本质使得不可能浏览层次上不相关的HTML元素。
或者，简单地说，因为你在你的评论中说过
没有统一的父容器
…仅仅通过select器是不可能的，而不用像其他答案所示的那样修改标记。
你必须使用jQuery .eq()解决scheme。
使用第n个孩子（项目编号）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) { };
要么
：与您的代码相同的第n个（项目编号）
.myclass:nth-of-type(1) { }; .myclass:nth-of-type(2) { }; .myclass:nth-of-type(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 */ }
也许使用CSS的“〜”select器？
.myclass { background: red; } .myclass~.myclass { background: yellow; } .myclass~.myclass~.myclass { background: green; }
看到我在jsfiddle的例子
这不是一个答案作为一个非答案，即一个例子，显示为什么上面的一个高度投票答案实际上是错误的。
我认为答案看起来不错。 实际上，它给了我所寻找的东西：：为我的情况而工作的:nth-of-type 。 （所以，谢谢你，@Bdwey。）
我最初通过@BoltClock（它说，答案本质上是错误的）阅读了评论，并驳回了它，因为我检查了我的使用案例，结果很奏效。 然后我意识到@BoltClock有30多万（！）的声誉，并有一个他声称是一个CSS大师的个人资料。 嗯，我想，也许我应该看得更近一点。
结果如下： div.myclass:nth-of-type(2)并不意味着“div.myclass的第二个实例”。 相反，它意味着“div的第二个实例，它也必须有'myclass'类”。 当div.myclass实例之间存在div.myclass div时，这是一个重要的区别。
我花了一些时间来解决这个问题。 所以，为了帮助别人更快地找出答案，我写了一个例子，我相信这个例子比书面描述更清楚地表明了这个概念：我已经劫持了h1 ， h2 ， h3和h4元素，基本上是div 。 我在其中的一部分上放了一个A类，把它们分成三份，然后用第一，第二和第三个实例用蓝色，橙色和绿色着色，使用h?.A:nth-of-type(?) 。 （但是，如果你仔细阅读，你应该问“第一，第二和第三个是什么？”）。 我也插入了一些不相似的（即不同的h级）或类似的（即相同的h级）未分类的元素。
请注意，特别是最后一组3.这里，在第一个和第二个h3.A元素之间插入一个未分类的h3元素。 在这种情况下，不出现h3.A颜色（即橙色），第三种颜色（即绿色）出现在h3.A的第二个实例上。 这表明h3.A:nth-of-type(n)中的n h3.A:nth-of-type(n)是计算h3 s，而不是h3.A s。
那么，希望有所帮助。 还有，谢谢@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, ie 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, ie h3, but has no class</h3> <h3 class="A">h3.A #2</h3> <h3 class="A">h3.A #3</h3> </div>
