css選擇器跨度：第一個孩子的問題

Question

我有一個div。在那個div裏面我有一個2行的表格。在第二行，我有一個單一的TD。在那td中，我首先比另一個跨度有一個img，而不是跨度，最後是另一個img。我想通過CSS選擇第一個跨度並給它一個紅色。下面我的代碼。不幸的是，它不工作。希望有人能幫忙。預先感謝您的回覆。乾杯。馬克。順便說一下，html結構可能看起來很愚蠢。我同意。我只是簡化以簡化講座。所以不需要評論代碼。

http://cssdesk.com/sVKXg

<div id="myDiv"> 
    <table cellspacing="0"> 

     <tr> 
      <td> 
       <span>Some text</span> 
      </td> 
     </tr> 

     <tr> 
      <td> 
       <img src="img/quotes-open.png" alt="" /> 
       <span>span1</span> 
       <span>span2</span> 
       <img src="img/quotes-close.png" alt="" /> 
      </td> 
     </tr> 

    </table> 
</div> 

#myDiv tr:nth-child(2) span:first-child{ 
    color:red;} 

Answer 1

的:first-child選擇僅選擇該元素，如果它是父的第一個子。在這種情況下，第一個孩子是一個圖像，而不是一個跨度。您正在尋找:first-of-type選擇器。

#myDiv tr:nth-child(2) span:first-of-type { color:red } 

Answer 2

的CSS應該是：

#myDiv tr:nth-child(2) span:nth-child(2){ 
    color:red; 
}