css选择器范围:第一个孩子的问题

Question

我有一个div.在那个div里面我有一个有2行的表.在第二行我有一个单独的TD.在那个td我首先有一个img,而不是span,而不是另一个span,最后是另一个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 }