如何选择相同类型的第n个元素

Question

我想从所有td中选择第n个td，我该怎么做？

我知道我可以用document.querySelectorAll("td")[nth]来做，但我正在寻找一种纯粹的CSS方式。

我尝试document.querySelectorAll("td:nth-child(77)")，但它没有像document.querySelectorAll("td")[77]那样给出结果。

Answer 1

var result = document.querySelectorAll("table td:nth-of-type(2)");

console.log(result);

<table>
  <tr><td>nope</td><td>nope</td></tr>
  <tr><td>nope</td><td>here</td></tr>
  
</table>  

UP。代码段显示您无法全局选择TD元素，但您可以在给定的TR中获得第n个td元素。这是你在找什么？

有选择器:nth-of-type(77)

应该帮助你。

nth-child选择器计算给定元素的所有子元素 - 包括其他类型的标记。当JS querySelector结果array从0

时，css选择器也从1开始计数

Answer 2

  

我知道我可以用document.querySelectorAll("td")[nth]来做，但我正在寻找一种纯粹的CSS方式。

没有纯粹的CSS等价物。见Matching the first/nth element of a certain type in the entire document

Answer 3

有一种名为==＆gt;的纯css方式：第n-的型
例如，要选择第77个td元素，语法为==＆gt; TD：第n的式（77）

有关：nth-​​of-type选择器的更多信息，请参阅Morzilla开发人员网络

//对于自己看到的元素//
https://developer.mozilla.org/nl/docs/Web/CSS/:nth-of-type

//有关您可以使用的所有选择的语法：nth-​​child和：nth-​​of-type，请参阅// https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child