如何用CSS选择器选择文本节点？该操作是否可行？

嘿，这个问题问得挺实在的！答案很明确：CSS没法直接选中文本节点，也不能修改文本节点的内容数据。下面给你拆解清楚细节：

为什么CSS做不到这件事？ #

• CSS的选择器体系从设计之初就是围绕元素节点构建的——它只能定位到HTML元素（比如你例子里的<p class="x">），根本没法直接选中元素内部的文本节点。
• CSS的核心作用是控制元素的样式表现，而非修改DOM节点的内容数据。哪怕是用::before/::after伪元素添加文本，也只是生成装饰性的视觉内容，并不会改变原文本节点里的实际数据。

那CSS能实现类似的视觉替换效果吗？ #

虽然不能直接操作文本节点，但你可以用CSS模拟出“修改文本”的视觉效果：

• 比如隐藏原文本，用伪元素替换显示内容：

  .x {
    visibility: hidden;
    position: relative;
  }
  .x::after {
    content: "Hello CSS";
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
  }
  

  注意：这种方式只是视觉上替换了文本，但原文本节点的"Hello world"依然存在于DOM中，并没有被真正修改。
• 或者修改文本的样式（颜色、大小、字体等），这是CSS的本职工作，但同样不会改变文本内容本身：

  .x {
    color: #ff4444;
    font-size: 1.2rem;
    font-weight: bold;
  }
  

要真正修改文本节点内容，得靠JavaScript #

就像你提到的，必须借助JS来操作DOM的文本节点：

// 方式1：直接修改文本节点的nodeValue
const pElement = document.querySelector('.x');
pElement.firstChild.nodeValue = "Hello JavaScript";

// 方式2：用textContent属性更简洁
document.querySelector('.x').textContent = "Hello JavaScript";

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