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

Question

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

我想<td>用className 选择第二个元素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)不返回相同的值。

小提琴的例子

Answer 1

从W3C规格

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

因此，您似乎无法使用类名称来选择带有此伪类的元素。

+:nth-of-type()