如何在不改变子元素格式的情况下设置元素内部文本样式？（选择器）

CSS没有原生选择器能直接选中元素内的纯文本节点，但可以通过继承+重置的技巧实现需求，以下是两种可行方案：

方案1：利用opacity反向控制 #

给父元素<p>设置透明度，再把内部所有子元素的透明度重置为1，这样只有纯文本会继承父元素的透明度，子元素（图标、div等）不受影响：

p {
  opacity: 0.5; /* 调整为你需要的透明度值 */
}

p > * {
  opacity: 1; /* 重置所有直接子元素的透明度 */
}

方案2：通过color的rgba属性控制 #

纯文本会继承父元素的color属性，而子元素可以单独重置颜色，这样能精准控制文本的透明度（不影响元素布局，比opacity更灵活）：

p {
  /* 这里的rgba最后一个值是透明度，0为完全透明，1为完全不透明 */
  color: rgba(0, 0, 0, 0.5);
}

/* 重置图标的颜色，覆盖继承的rgba */
p .some-icon-class {
  color: rgb(25, 118, 210); /* 和原图标style里的颜色一致 */
}

补充说明 #

因为你的HTML是Vue组件生成的，只要把上述CSS加到组件的样式里（注意scoped样式的作用域问题，如果用scoped，确保选择器能命中目标元素），就能实现需求。

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