是否有文本节点的 CSS 选择器？

Posted 2023-03-05

【中文标题】是否有文本节点的 CSS 选择器？

【英文标题】：Is there a CSS selector for text nodes?

【发布时间】：2022-01-04 17:49:55

【问题描述】：

我想做的（显然不是在 IE 中）是：

p:not(.list):last-child + :text 
  margin-bottom: 10px;

这会给文本节点一个边距。 （这甚至可能吗？）如何使用 CSS 获取文本节点？

【问题讨论】：

您可以使用::first-line 进行近似计算，尽管顾名思义，它仅适用于文本的第一行。 （另外，我认为只能设置一些属性）

【参考方案1】：

文本节点不能应用边距或任何其他样式，因此您需要应用样式的任何内容都必须在元素中。如果您希望元素内的某些文本具有不同的样式，请将其包装在 span 或 div 中，例如。

【讨论】：

我仍然非常想念文本节点上的 ::before 和 ::after。

I'm nevertheless desperately missing ::before and ::after on text nodes. 确实。他们可能不接受格式化，但他们肯定接受content。

问如何定位文本节点是一个完全合理的问题。我意识到 OP 专门说“边距”，但它们是其他样式，可以应用于文本节点，您可能希望将其应用于文本节点而不是父节点。例如，假设我想要文本下方的边框底部。将该边框底部应用于文本节点会产生所需的结果，但将其应用于父 div 会在整个 div 周围创建一个底部边框。当然，不幸的是，CSS 不允许您通过添加 html 元素来定位文本节点……至少现在是这样。

你可以为它设置字体，当然可以，但是没有应用任何其他样式

你现在只能做这样的事情***.com/questions/10645552/…

【参考方案2】：

您不能使用 CSS 定位文本节点。我和你在一起;我希望你能......但你不能:(

如果您不将文本节点包装在 <span> like @Jacob suggests 中，则可以改为使用周围元素 padding 而不是 margin：

HTML

<p id="theParagraph">The text node!</p>

CSS

p#theParagraph

    border: 1px solid red;
    padding-bottom: 10px;

【参考方案3】：

文本节点（不包含在特定标签中）现在可以使用::target-text pseudoelement 选择器在非常特定的用例中定位。匹配文本字符串的查询参数（url 编码；例如空格必须编码为%20）可以这样设置样式：

::target-text  /* color, background color, etc */ 

与其他highlight pseudoelements 一样，仅支持某些样式属性，如listed here。

有一个demo 用于此（父链接位于MDN page 上用于::target-text）。将“文本”的查询参数字符串更改为不同的字符串，以查看不同文本的样式。

::target-text 伪元素选择器的一个限制是只能设置第一个匹配的文本字符串的样式。此外，at 67.8%，截至 2022 年 1 月，浏览器支持并不多。

【讨论】：

截至 2022 年 2 月 13 日，::target-text 功能为实验性。