如何選擇第一個孩子按照類沒有類的類似元素？

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