有文本节点的 CSS 选择器吗？

Question

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

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

这将为文本节点提供边距。 （这可能吗？）我如何用 CSS 获取文本节点？

Answer 1

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

span

或

div

中。

Answer 2

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

如果您不将文本节点包装在

<span>

中，就像 @Jacob 建议一样，您可以改为给周围的元素

padding

而不是

margin

：

HTML

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

CSS

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

Answer 3

文本节点（未包含在特定标签内）现在可以使用::target-text伪元素选择器在

非常特定的用例

中定位。与文本字符串匹配的查询参数（url 编码；例如，空格必须编码为 %20

）可以采用如下样式：

::target-text { /* color, background color, etc */ } 就像其他

突出显示伪元素一样，仅支持某些样式属性，如此处列出。

为此有一个

demo（父链接位于 MDN 页面 上的 ::target-text

）。将“文本”的查询参数字符串更改为不同的字符串，以查看不同文本的样式如何。

::target-text

伪元素选择器的一个限制是只能设置第一个匹配的文本字符串的样式。此外，截至 2022 年 1 月，浏览器支持率较低，

为 67.8%。

Answer 4

据我所知，目前还没有，但有一个开放问题票证请求将其包含在 css-psuedo-5 中：

[css-pseudo-5] ::text / ::text-node 伪元素#2208。我建议您对该问题票竖起大拇指以表示支持。您还可以订阅它以获取有关讨论和进展的通知。请避免在那里发表嘈杂的评论，比如只包含“+1”/“bump”的评论。