css - 是否有 CSS 选择器来选择矩形框中的文本(内联 block )？

Question

CSS 规则能否选择框内包含文本(或内联 block )的部分？

例如，一个 HTML 片段，如 <p>The quick brown fox jumped over the lazy dog</p>可能会这样布局:

+--------------------------+
|  The quick brown fox     |
|  jumped over the         |
|  lazy dog                |
+--------------------------|

如果我创建一个像 p { background: red } 这样的 CSS 规则那么整个框/矩形将具有红色背景，包括每行末尾的“空白”。

有没有一种方法可以指定一个选择器，使得在每一行中只有实际文本具有红色背景？

我注意到，默认情况下，当光标实际位于文本上方时，光标会从“箭头”变为“i-beam”；如果它位于段落框内的其他位置，而不是文本上方，则它是箭头而不是工字线。

如果我指定一个明确的规则，如 p { cursor: crosshair }那么它在矩形框内的任何地方都有效。同样，是否可以有一个仅当光标实际位于文本上方时才被选中的规则？

Answer 1

您可以做的是将文本包裹在 span 元素中，然后为其设置 background 和 cursor 属性。