如何使用XPath选取第一个div的直接子级span元素？

嘿，这个需求很好解决！咱们要选的是最外层<div>的直接子元素<span>（也就是test2、test3、test4、test6），核心是利用**直接子选择器（>）**来精准匹配父元素的直接后代，避免选中嵌套在内部div里的span（比如test1、test5）。下面给你几种实用的实现方式：

1. CSS样式（如果是为了设置样式） #

如果只是要给这些span设置样式，直接用直接子选择器即可：

/* 匹配所有div的直接子span（如果页面只有目标外层div，这样就够用） */
div > span {
  color: red; /* 示例样式 */
}

/* 更精准的方式：给外层div加类名 */
/* 先修改HTML：<div class="outer-wrapper">...</div> */
.outer-wrapper > span {
  color: red;
}

加类名的方式能避免误选页面中其他div的直接子span，推荐优先使用。

2. 原生JavaScript选取元素 #

如果需要在JS中操作这些元素，有两种方式：

方式一：借助类名精准定位 #

// 先给外层div加类名outer-wrapper
const targetSpans = document.querySelectorAll('.outer-wrapper > span');

// 遍历操作元素
targetSpans.forEach(span => {
  console.log(span.innerText); // 会输出test2、test3、test4、test6
});

方式二：无类名时用:scope伪类 #

如果没法给外层div加类名，可用:scope伪类限定上下文（确保只选当前div的直接子元素）：

// 先获取最外层div（假设它是页面中的第一个div）
const outerDiv = document.querySelector('div');
// 在外层div的上下文中，选取它的直接子span
const targetSpans = outerDiv.querySelectorAll(':scope > span');

3. jQuery方式（如果项目使用jQuery） #

// 有类名的情况
const targetSpans = $('.outer-wrapper > span');

// 无类名时，选取第一个div的直接子span
const targetSpans = $('div:first > span');

核心原理：>选择器只会匹配直接作为父元素子节点的元素，所以嵌套在内部div里的span（父元素是内层div）不会被选中，正好符合你的需求。

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