CSS :not伪类未按预期工作，如何选择独立文本节点？

问题背景 #

我的WordPress站点表单有如下HTML结构：

<div class="frontend-item-container" style="" data-element-key="thumbnail">
     <!-- WPGurus\Forms\Elements\Media_File -->             
     <label for="frontend-form-8-post-data-thumbnail">Featured Image</label>
     This text is used for help text.
     <div class="frontend-item-messages ">
     </div>
     ...
</div>

需要仅选中其中的独立帮助文本（This text is used for help text.），尝试过以下选择器但未达预期：

• .frontend-item-container { color:red; }：同时选中label和帮助文本
• .frontend-item-container label { color:red; }：仅选中label
• .frontend-item-container:not(label) { color:red; }：仍同时选中label和帮助文本，不清楚原因

目前临时方案是先给父容器设置样式，再逐个还原子元素样式，但需要还原的元素太多，且实验性的CSS文本节点选择器不适用当前场景。

解决方案 #

核心限制说明 #

CSS（除未标准化的实验性特性外）无法直接选中独立的文本节点，只能通过元素选择器或利用继承特性间接实现需求。

方案1：修改HTML结构（优先推荐，若可操作） #

如果能修改表单生成的HTML，把帮助文本放到专属标签中，比如：

<div class="frontend-item-container" style="" data-element-key="thumbnail">
     <!-- WPGurus\Forms\Elements\Media_File -->             
     <label for="frontend-form-8-post-data-thumbnail">Featured Image</label>
     <span class="form-help-text">This text is used for help text.</span>
     <div class="frontend-item-messages ">
     </div>
     ...
</div>

之后直接用专属类选择器选中：

.form-help-text {
  color: red;
}

方案2：利用CSS继承特性（无需修改HTML） #

先给父容器设置目标样式，再将容器内所有直接子元素的样式还原为初始值，这样只有未被包裹的文本节点会保留父容器的样式：

.frontend-item-container {
  color: red; /* 给容器内所有内容（包括文本节点）设置样式 */
}
.frontend-item-container > * {
  color: initial; /* 还原所有直接子元素的样式，抵消继承 */
}

关于.frontend-item-container:not(label)无效的原因 #

这个选择器的逻辑是选中所有不是label元素的.frontend-item-container容器本身，而非容器内的非label内容。父容器设置的样式会被内部的label元素继承，所以label和文本节点都会变红，达不到预期效果。

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