如何使用CSS选择器仅选取HTML中的目标金额文本29.99？

我明白你遇到的问题了——你想精准提取29.99这个金额，但之前的选择器总是把$符号也带进来，因为那个货币符号是span.amount里的子元素，而你要的是和它同级的文本节点。下面给你几个可行的JavaScript方案：

方法1：筛选文本节点（最通用） #

通过获取span.amount的所有子节点，过滤出纯文本节点并提取内容：

// 获取目标容器元素
const amountContainer = document.querySelector('li.total span.amount');
// 筛选出文本节点并提取内容
const purePrice = Array.from(amountContainer.childNodes)
  .filter(node => node.nodeType === Node.TEXT_NODE)
  .map(node => node.textContent.trim())
  .join('');

console.log(purePrice); // 输出 "29.99"

方法2：文本内容替换（适合固定货币符号场景） #

如果确定货币符号是$，可以直接获取整个容器的文本后替换掉符号：

const amountContainer = document.querySelector('li.total span.amount');
const purePrice = amountContainer.textContent.replace(/^\$/, '').trim();

console.log(purePrice); // 输出 "29.99"

方法3：使用XPath直接选择文本节点 #

XPath可以直接定位到目标文本节点，不需要额外处理：

const xpathQuery = '//li[contains(@class, "total")]/span[contains(@class, "amount")]/text()';
const priceText = document.evaluate(xpathQuery, document, null, XPathResult.STRING_TYPE, null).stringValue.trim();

console.log(priceText); // 输出 "29.99"

为什么之前的选择器无效？ #

你尝试的li.total span.amount:not(span)其实还是选中了span.amount元素本身，它的内容依然包含子元素的文本。CSS选择器只能选中元素节点，无法直接选中文本节点，所以必须结合JavaScript来提取文本内容。

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