如何用CSS选择嵌套的独立文本节点以修改字号？

首先明确：CSS无法直接选中纯文本节点，:not()伪类仅能筛选元素，所以你之前的方法行不通。下面提供两种可行的解决办法：

方法一：CSS间接控制（无需JS） #

利用CSS继承特性，给父容器设置目标字号，再让其他子元素重置回原有字号：

/* 给父容器设置目标文本的字号 */
.grid-product__price {
  font-size: 24px; /* 示例字号，按需调整 */
}

/* 重置所有子span的字号为原有大小 */
.grid-product__price > span {
  font-size: 16px; /* 原有字号，根据实际情况修改 */
}

父容器内的纯文本节点（即$19.00）会继承父元素的字号，其他span元素的字号被重置，实现只修改目标文本的效果。

方法二：JavaScript直接操作文本节点 #

如果需要精准定位文本节点，可通过JS找到它，要么直接修改样式，要么将其包裹为元素后再设置样式：

示例1：直接修改文本节点样式 #

const priceContainer = document.querySelector('.grid-product__price');
const childNodes = priceContainer.childNodes;

// 遍历筛选目标文本节点
for (let node of childNodes) {
  // 匹配非空的文本节点，且内容包含目标价格
  if (node.nodeType === Node.TEXT_NODE && node.textContent.trim().includes('$19.00')) {
    node.style.fontSize = '24px';
    break;
  }
}

示例2：包裹为span元素（更利于后续维护） #

const priceContainer = document.querySelector('.grid-product__price');
const childNodes = priceContainer.childNodes;

for (let node of childNodes) {
  if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() === '$19.00') {
    // 创建span包裹文本节点
    const saleSpan = document.createElement('span');
    saleSpan.className = 'grid-product__price--sale';
    saleSpan.style.fontSize = '24px';
    
    // 替换原文本节点为新span
    node.parentNode.replaceChild(saleSpan, node);
    saleSpan.appendChild(node);
    break;
  }
}

之后你也可以通过自定义类.grid-product__price--sale来统一控制样式，更符合前端规范。

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