：nth-​​of-type（n）不能按预期工作 [英] :nth-of-type(n) does not work as expected

问题描述

使用：nth-​​of-type（n）进行选择时，不会返回预期的响应。

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

我想用className b 选择第二个< td>

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

为什么使用选择器 .b：nth-​​of-type（2） >

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. < td> 的数量可以更改。


2. 纯JavaScript / CSS。

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

虽然 .b：nth-​​last-child（1）会工作，

这个问题是为了理解为什么 .b：nth-​​child（2）不会返回相同的。

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

示例小提琴

推荐答案

从 W3C 规格

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

The :nth-of-type() pseudo-class represents an element that has an+b siblings with the same expanded element name before it in the document tree, for any zero or positive integer value of n, and has a parent element.

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

So it looks like you can't use class name to select elements along with this pseudo class.

+ ：nth-​​of-type（）

这篇关于：nth-​​of-type（n）不能按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！