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

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

<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 {做事}适用于所有，显然，但我也想要能够选择类.myclass的第一，第二或第三个div这样，无论他们在标记：

div.myclass:first {color:#000;} 
div.myclass:second {color:#FFF;} 
div.myclass:third {color:#006;}

几乎像jQuery索引选择.eq(索引)，这是我目前使用，但我需要一个无脚本的选择。

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

解决方法

你可能最终在发布这个问题和今天之间实现了这一点，但是选择器的本质使得不可能通过层次不相关的HTML元素。

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

there are no uniform parent containers

…它是不可能的选择器单独，没有修改标记在某些方式，如其他答案所示。

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

原文地址：https://www.jb51.cc/css/222037.html