：nth-​​of-type（n）不能按预期工作

Question

使用:nth-of-type(n)进行选择时，它不会返回预期的响应。

我想要使用className <td>选择第二个b元素。

为什么使用选择器.b:nth-of-type(2)时没有结果？

  <div id="foot">
    <table id="nav">
      <tbody>
        <tr valign="top">
          <td class="b"><b>Previous</b></td>
          <td><b>1</b></td>
          <td><a href="#">2</a></td>
          <td><a href="#">3</a></td>
          <td><a href="#">4</a></td>
          <td><a href="#">5</a></td>
          <td><a href="#">6</a></td>
          <td><a href="#">7</a></td>
          <td><a href="#">8</a></td>
          <td><a href="#">9</a></td>
          <td><a href="#">10</a></td>
          <td class="b"><a href="#">Next</a></td>
        </tr>
      </tbody>
    </table>
  </div>

约定

1. <td>元素的数量可以更改。
2. 仅限纯JavaScript / CSS。

虽然.b:nth-last-child(1)可行，但是 这个问题是要理解为什么.b:nth-child(2)不会返回相同的内容。

Example Fiddle

Answer 1

来自 W3C 规格

  

：nth-​​of-type（）伪类表示在文档树中具有相同扩展元素名称的+ b兄弟元素的元素，对于任何零或正整数n的值，并且有一个父元素。

所以看起来你不能使用类名来选择元素以及这个伪类。

+:nth-of-type()

Answer 2

正如@Sourabh所说，nth-of-type在这种情况下不正确，nth-child（或在这种情况下为last-child）是正确的方法。我更新了your fiddle。您的标记也不一致。在第一个.b中，您有一个<b>元素，而在第二个（最后一个）中，您有一个<a>标记。