如何按类别选择第一个没有类的相似元素？

Question

如何在此构造中选择类别为“red”（First）的第一个元素？

HTML：

<div class='container'>
    <p>Zero</p>
    <p class="red">First</p>
    <p class="red">Second</p>
</div>

http://jsfiddle.net/ek9Ch/

Answer 1

试试这个..

.container .red:nth-child(2)
{
color: red;
}

Answer 2

好的，不是很漂亮，但做的工作是：

.container p + p.red {
    color: red;
}

.container p + p.red ~ p {
    color:black; /*reverting back*/
}

小提琴：http://jsfiddle.net/Varinder/ek9Ch/2/

Answer 3

.container p[class=red]:nth-child(2)
        {
            color: red;
        }