如何选择第一个孩子按照类没有类的类似元素？

Question

如何在此构造中选择第一个具有类“红色”（第一个）的元素？

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