如何使用querySelectorAll选择指定区域类及分个vehicle div内元素

1. 仅选择section内的.vehicle元素 #

要把选择范围限定在section标签内部的.vehicle元素，只需调整CSS选择器，将父容器section作为前缀：

// 仅选中所有section后代中的.vehicle元素
let sectionVehicles = document.querySelectorAll('section .vehicle');

这个选择器会先定位页面中所有section标签，再选中它们内部所有带有vehicle类的后代元素，不会匹配页面其他区域的.vehicle。

2. 分别操作第一个和第二个.vehicle元素 #

有两种实用方式可以单独定位并操作指定位置的.vehicle元素：

方式一：通过NodeList索引访问 #

querySelectorAll返回的是类数组结构的NodeList，可以直接用索引获取对应元素（索引从0开始）：

let sectionVehicles = document.querySelectorAll('section .vehicle');

// 操作第一个.vehicle元素
const firstVehicle = sectionVehicles[0];
firstVehicle.style.backgroundColor = '#f0f0f0'; // 示例：修改背景色
firstVehicle.querySelector('.inner-content').textContent = '第一辆车'; // 操作内部子元素

// 操作第二个.vehicle元素
const secondVehicle = sectionVehicles[1];
secondVehicle.classList.add('highlight'); // 示例：添加高亮类

方式二：用CSS伪类直接定位 #

如果不需要一次性获取所有元素，也可以用CSS伪类直接选中指定位置的元素：

// 选中section内的第一个.vehicle元素
const firstVehicle = document.querySelector('section .vehicle:first-of-type');

// 选中section内的第二个.vehicle元素
const secondVehicle = document.querySelector('section .vehicle:nth-of-type(2)');

这种方式更直接，适合只需要操作单个目标元素的场景。

内容的提问来源于stack exchange，提问作者user23330120