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

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

您可能终于在发布此问题与今天之间意识到了这一点，但是选择器的本质使其无法浏览与层次结构无关的HTML元素。

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

没有统一的父容器

…仅使用选择器是不可能的，而不能像其他答案所示那样以某种方式修改标记。

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