2

When using :nth-of-type(n) to make a selection it does not return the expected response.

I'm wanting to select the second <td> element with className b.

Why when using selector .b:nth-of-type(2) yield no result?

  <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>

Stipulations

  1. The number of <td> elements can change.
  2. pure JavaScript/CSS only.

Although .b:nth-last-child(1) would work,
this question is to understand why .b:nth-child(2) does not return the same.

Example Fiddle

4

2 回答 2

5

来自W3C规范

:nth-of-type() 伪类表示一个元素，该元素在文档树中具有在它之前具有相同扩展元素名称的 an+b 兄弟元素，对于 n 的任何零或正整数值，并且具有父元素。

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

+:nth-of-type()

于 2013-06-18T15:10:16.203 回答
0

正如@Sourabh 已经说过的那样，nth-of-type在这种情况下是不正确的，nth-child（或last-child在这种情况下）是正确的方法。我更新了你的小提琴。您的标记也不一致。在第一个中，.b您有一个<b>元素，而在第二个（最后一个）中，您有一个<a>标签。

于 2013-06-20T19:32:45.440 回答