【问题标题】：css nth-child nth-last-of-type with javascript – without jquerycss nth-child nth-last-of-type with javascript – 不带 jquery
【发布时间】：2018-04-19 07:19:39
【问题描述】：

是否有可能仅使用纯 JavaScript 向 nth-child() 和 nth-last-of-type() 提出上诉（没有 jquery）？我想在很大程度上避免使用 jquery。

【问题讨论】：

您可以在现代浏览器中使用带有document.querySelectorAll 的一些CSS3 选择器。
您真正想要实现什么？这个问题有点模棱两可
选择子元素，将它们存储在一个数组中并选择[4]，这就是jQuery的工作原理。
我正在编写一个最小的脚本。客户端的说明是：不需要额外的库，必须与旧浏览器（ie7、ie8等）兼容

标签： javascript css css-selectors

【解决方案1】：

使用document.querySelectorAll。

例如

var elements = document.querySelectorAll('div:nth-child(5)');

document.querySelectorAll

总结

返回文档中元素的列表（使用深度优先与指定匹配的文档节点的前序遍历）一组选择器。返回的对象是一个 NodeList。

语法

elementList = document.querySelectorAll(selectors);

在哪里

elementList 是元素对象的非活动 NodeList。

选择器是一个字符串，包含一个或多个用逗号分隔的 CSS 选择器。

返回的 NodeList 将包含文档中的所有元素由任何指定的选择器匹配。如果选择器 string 包含一个 CSS 伪元素，返回的 elementList 将是空。

【讨论】：

基本可以在高级浏览器中使用，可惜不适用于ie7！
@user1154112 做我该做的，停止专门支持 IE 7。不到 1% 的工作站使用它。
我早就停止支持ie7了，但是我的客户目前的ie7点击率超过8% :(
好的。我的哀悼。

【解决方案2】：

This should help。您可以使用它通过类名获取所需的元素。如果没有类，你也可以 .getElementById。

var x = document.getElementsByClassName("class-name")[index#];

在这里查看它的工作：JSFiddle

【讨论】：

虽然这可能有效，但您没有解释任何有关您的答案的内容，这对任何阅读它的人都没有帮助。
谢谢，安东尼。我已经更新了帖子以包含上下文和示例。

【解决方案3】：

使用 CSS :last-child 选择器

:last-child 选择器匹配每个元素，它是其父元素的最后一个子元素。

例如

var elements = document.querySelectorAll('div:last-child');

console.log(elements);

// example output
// NodeList(32)[div.container, div, div, ...]

参考：https://www.w3schools.com/cssref/sel_last-child.asp

【讨论】：