(".samllblock:nth-child(" + index + ")").classList.add("active")为什么变量是第8个以后就会报错

可能是因为变量"index"的值超出了".smallblock"选择器匹配到的元素数量范围，导致该选择器无法找到对应的元素而报错。

例如，如果".smallblock"选择器匹配到的元素数量只有7个，而变量"index"的值为8或更大时，就会出现上述问题。

为了避免这种情况，可以在代码中加入判断条件，确保变量"index"的值不超出选择器匹配到的元素数量范围。例如：

var index = 8;
var smallblocks = document.querySelectorAll(".smallblock");
if (smallblocks.length >= index) {
  smallblocks[index - 1].classList.add("active");
} else {
  console.log("找不到对应的元素");
}

在上述代码中，我们使用了document.querySelectorAll()方法来获取所有匹配".smallblock"选择器的元素，并存储在"smallblocks"变量中。然后，我们使用if语句判断变量"index"的值是否在可接受的范围内，如果是，则将对应元素的class属性添加"active"，否则输出一条错误信息。

相关问题

.mm:nth-child(1)

这是一个 CSS 选择器，它选择其父元素下的第一个 class 为 ".mm" 的元素。具体来说，":nth-child(1)" 表示在其父元素下选择第一个子元素。而 ".mm" 则表示选择 class 为 ".mm" 的元素。因此，".mm:nth-child(1)" 选择的是其父元素下第一个 class 为 ".mm" 的元素。

section .color:nth-child(1)

根据提供的引用内容，`section .color:nth-child(1)`是一个CSS选择器，它的意思是选择所有class为`color`的元素，且这些元素是它们父元素的第一个子元素。具体来说，它会选择所有满足以下条件的元素：
1. 元素的标签名为`section`；
2. 元素的class属性中包含`color`；3. 元素是它们父元素的第一个子元素。

如果你想要在HTML文档中使用这个选择器，可以这样写：

section:first-child .color {
  /* 这里是样式规则 */
}

这个选择器的意思是选择所有class为`color`的元素，且这些元素是它们父元素的第一个子元素，且它们的父元素是`section`元素。