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 }

Answer 2

CSS应该是：

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

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

2 个答案: