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

Question

我想做什么(显然不是在IE中)是:

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

这将为文本节点提供边距.(这甚至可能吗？)我如何使用CSS获取文本节点？

Answer 1

文本节点不能有边距或任何其他样式应用于它们,因此您需要应用的样式必须位于元素中.如果您希望元素内部的某些文本的样式不同,请将其包装在span或中div.

然而,我在文本节点上拼命丢失:: before和:: after. (53认同)
询问如何定位文本节点是一个非常合理的问题.我意识到OP特别说"margin",但它们是可以应用于文本节点的其他样式,您可能希望将其应用于文本节点而不是父节点.例如,假设我想要文本下方的边框底部.将该边框底部应用于文本节点将具有所需的结果,但将其应用于表示父div,将在整个div周围创建底部边框.当然不幸的是,CSS不允许您通过添加HTML元素来定位文本节点...至少截至目前. (9认同)
"然而,我仍然在文本节点之前和之后拼命错过::确实.他们可能不会采用格式化,但他们肯定会采用"内容". (5认同)

Answer 2

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

如果你没有将文本节点包装在<span> 类似@Jacob的建议中,你可以改为给出周围的元素padding,而不是margin:

HTML

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

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

Answer 3

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

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

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

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

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