CSS 3 nth-child(n) 不起作用 #table_id td a：nth-of-type(n)

Question

我有:

<table id="table_id" > 
<tr>
<td><a href="/"><img src="http://images1.png""></a></td>
<td><a href="http://x.com" >xx</a></td>
<td><a href="http://y.com" >yy</a></td>
<td><a href="http://z.com" >zz</a></td>
</tr>
</table>

和选择器来改变链接的颜色和样式

为什么这个有效

#table_id td:nth-of-type(2) a
{
color:#fff;
text-decoration:none;
}

而不是这个?

#table_id td a:nth-of-type(2) 
{
color:#fff;
text-decoration:none;
}

Answer 1

如果我们定义这些CSS选择器的作用，这一切都可以解释。

第一个选择器(工作):

#table_id td:nth-of-type(2) a

翻译:

查找id为table_id的任何元素。在它下面的任何地方，然后找到第二个出现的<td>然后在它下面的任何地方找到<a>

这个选择器匹配是因为:

<[**table id="table_id"**]> 
  <tr>
    <td><a href="/"><img src="http://images1.png""></a></td>
    <[**td**]><[**a**] href="http://x.com" >xx</a></td>
    <td><a href="http://y.com" >yy</a></td>
    <td><a href="http://z.com" >zz</a></td>
  </tr>
</table>

第二个选择器(不工作):

#table_id td a:nth-of-type(2) a

翻译:

找到id为table_id的任何元素，然后在它下面，找到<td>的任何出现，然后在它下面，找到类型为<a>的第二个出现。最后，在下面找到一个<a>。

这个不匹配，因为:

<[**table id="table_id"**]> 
  <tr>
    <[**td**><a href="/"><img src="http://images1.png""></a></td>
    <[**td**]>
      <a href="http://x.com" ></a>
      <[**a**] href="this matches. because it's the second nth-type">
        <[**a**] href="this is the actual element you'd be selecting with that selector."></a>
      </a>
    </td>
    <[**td**]><a href="http://y.com" >yy</a></td>
    <[**td**]><a href="http://z.com" >zz</a></td>
  </tr>
</table>

Answer 2

首先我们看一下#table_id td:n -of-type(2)。以#table_id为父对象，td:n -of-type(2)针对第二个td 子对象。也就是说，它的目标是

<td><a href="http://x.com" >xx</a></td>

但是#table_id td a:n -of-type(2)将td视为父节点，因此以第二个 a 子节点为目标。但是，代码中的每个a都是它的td的第一个子元素，因此不是目标元素。