css第n个child第n个last类型，带javascript–不带jquery

Question

是否有可能只使用纯javascript来吸引（没有jquery）nth-child（）和nth-last-of-type（）？我想在很大程度上避免使用jquery。

Answer 1

使用document.querySelectorAll.

例如

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

---

document.querySelectorAll

摘要

返回文档中元素的列表（使用深度优先文档节点的预购遍历）选择器组。返回的对象是NodeList。

语法

elementList=document.querySelectorAll（选择器）；

其中

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

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

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

Answer 2

这应该会有所帮助。您可以使用它来通过类名获得所需的元素。如果没有类，您也可以.getElementById。

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

在这里查看它的工作：JSFiddle

Answer 3

使用CSS：最后一个子项选择器

: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