有没有针对文本节点的CSS选择器？

Question

我想要做的事情（显然不能在IE中实现）是：

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

如何为文本节点添加边距？（这是否可能？）我该如何使用 CSS 获取文本节点？

- Rudie

---

您可以使用::first-line来近似实现，但正如名称所示，它仅适用于文本的第一行。（此外，我认为只有某些属性可以在其上设置）。 - Mark Garcia

目前还不可能，关于将其添加到CSS中有一些讨论，但离实现还有很长的路要走。 - Mariusz Pawelski

Answer 1

文本节点不能有任何边距或其他样式应用于它们，因此您需要在元素中应用样式。如果您想要元素内部的某些文本具有不同的样式，请将其放入或

中进行包装。

- Jacob

---

我仍然急切地想在文本节点上使用 ::before 和 ::after，但它们却不可用。 - shabunc

我仍然非常渴望在文本节点上使用 ::before 和 ::after。确实，它们可能不会接受格式设置，但它们肯定可以接受“content”。 - Synetech

如何定位文本节点是一个非常合理的问题。我知道OP特别提到了“margin”，但是还有其他样式可以应用于文本节点，您可能希望将这些样式应用于文本节点而不是父节点。例如，如果想在文本下方添加底部边框，则将该底部边框应用于文本节点将产生所需的结果，但是如果将其应用于父div，则会在整个div周围创建底部边框。不幸的是，CSS目前还不能直接定位文本节点而必须通过添加HTML元素来实现。 - VKK

你可以为它设置字体，确保它能够工作，但不应用任何其他样式。 - Hamid Bahmanabady

你现在只能像这样做 https://dev59.com/Fmgv5IYBdhLWcg3wYvyi - fearis

Answer 2

CSS无法选择文本节点。我知道你希望可以选择...但是不行 :(

如果您不想像@Jacob建议的那样将文本节点包装在<span>中，则可以给周围的元素添加padding而不是margin：

HTML

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

CSS

p#theParagraph
{
    border: 1px solid red;
    padding-bottom: 10px;
}

- Richard JP Le Guen

Answer 3

文本节点（未包装在特定标签内的文本）现在可以使用::target-text伪元素选择器在非常特定的情况下进行定位。匹配一段文本字符串的查询参数（URL编码；例如，空格必须编码为%20）可以像这样进行样式设置：

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

就像其他强调伪元素一样，只支持特定的样式属性，如在此列出。

有一个演示可以进行参考（父链接在::target-text的MDN页面上）。更改查询参数字符串中的“text”为不同的字符串，以查看不同的文本如何被样式化。

::target-text伪元素选择器的一个限制是只能为第一个匹配的文本字符串设置样式。此外，在2022年1月时，占比67.8%浏览器支持程度还很有限。

- CSSBurner

---

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

截至2023年7月9日，::target-text功能仍处于实验阶段。 - undefined