如何使用 CSS 选择文本节点答案

【问题标题】：How to select a text node with CSS如何使用 CSS 选择文本节点
【发布时间】：2021-11-25 21:21:45
【问题描述】：

我有以下 HTML 标记：

<h1> 
     <div class="sponsor"> 
          <span>Hello</span>  
     </div> 
     World 
</h1>

当我使用 CSS 选择器h1 时，我得到Hello World。

很遗憾，我无法更改标记，我只能使用 CSS 选择器，因为我使用的是聚合 RSS 提要的系统。

是否有任何 CSS 选择器我只能使用文本节点？特别是本例中的World？

【问题讨论】：

stackoverflow.com/questions/5688712/…
把它放在一个单独的跨度...
您可以将更改应用到h1，然后使用.sponsor 撤消它们。这取决于你想做什么。
对世界使用不同的span标签，你可以给它一个id。
@Adrift : not() 在 css 中是可能的

标签： html css-selectors

【解决方案1】：

我不知道如何只使用 CSS，但是...

使用JQuery，你可以选择里面的所有元素，除了它的子元素里面的东西

$("h1:not(h1 > div)").css() 并在其中放置您想要的任何 CSS 效果。

【讨论】：

【解决方案2】：

我遇到了类似的问题，我必须从 C# 函数生成的 html 中删除“世界”文本。

我在 'h1' 元素上将字体大小设置为 0，然后将我的 css 应用到 div 类。基本上隐藏了多余的文本，但将内容保留在 div 中。

【讨论】：

【解决方案3】：

解决方法：

h1 {
  color: red;
}
h1 * {
  color: lime;
}

<h1> 
     <div class="sponsor"> 
          <span>Hello</span>  
     </div> 
     World 
</h1>

【讨论】：

【解决方案4】：

我也遇到了同样的问题，我无法触摸标记并且无法使用 js 进行控制。我需要隐藏 div 元素中的文本节点，但该元素保持可见。所以这是我的解决方案：

标记：

<div id="settings_signout_and_help">
        <a id="ctl00_btnHelpDocs" class="ico icoHelp" href="http://" Help Guide</a>
            Signed in as: <a id="ctl00_lUsr" href="Profile.aspx">some</a>&nbsp;&nbsp;
            <a href="Logout.aspx">Home</a>
                Sign out
        </div>

css：

#settings_signout_and_help {
font-size: 1px !important;
}

#settings_signout_and_help a {
font-size: 13px !important;
}

希望对大家有所帮助！

【讨论】：

【解决方案5】：

目前的 CSS 状态无法做到这一点，查看这个链接：W3C

这里的问题是您写入屏幕的内容没有显示在 DOM 中：P。

另外，::outside 似乎还没有工作（至少对我来说，在 Safari 6.0.3 中），或者它根本没有产生所需的结果。

检查我的小提琴，然后检查 DOM 源：JSfiddle

终于有了属性选择器a { content: attr(href);}，让CSS能够读取DOM-node属性。似乎还没有与此等效的 innerHTML。如果这是可能的，那就太好了，而您可能能够操纵标签的内部标记。

【讨论】：

定义::outside 的文档已被放弃，等待完全重写。请参阅stackoverflow.com/questions/10419614/… 另外，这个答案所指的属性选择器不是属性选择器 - 这是完全不同的东西，这只是一个 CSS 函数。最后，拥有与 innerHTML 等效的 CSS 是没有意义的 - innerHTML 是用于操作 HTML 的 API，而 CSS 只是 CSS。

【解决方案6】：

这与我上周提出的问题几乎相反：Is it possible to select the very first element within a container that's otherwise pure text without using classes or identifiers in pure CSS?

简短的回答是否定的。 "World" 在这个例子中不是它自己的元素 - 因此没有办法选择它。

您需要在此处设置h1 的样式，然后使用div.sponsor 覆盖该样式。例如，如果您希望此处的“世界”具有黑色背景和白色文本，您可以使用类似于：

h1 {
    background:black;
    color:white;
}

h1 div.sponsor {
    background:white;
    color:black;
}

不幸的是，如果您只想要“世界”一词的样式并且您的标记不仅仅包含在 <div>Hello</div> World Foo 中，那么这将不起作用。

我不相信在这种情况下使用纯 CSS 来设置样式只是“世界”是可能的。

【讨论】：

所以纯 CSS 不可能只选择文本 World，不是吗？