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

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

<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}显然，这适用于所有人，但我也希望能够选择班级的第一个、第二个或第三个 div.myclass像这样，无论它们位于标记中的哪个位置:

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

几乎就像 jQuery 索引选择.eq( index )，这就是我目前正在使用的，但我需要一个无脚本的替代方案。

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

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

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

OR

:nth-of-type（项目编号） 与你的代码相同

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