有没有一种CSS选择器可以选择矩形框内的文本（内联块）？

Question

一个CSS规则能否选择包含文本（或内联块）的盒子部分？

例如，像<p>The quick brown fox jumped over the lazy dog</p>这样的HTML片段可能会被布局如下：

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

如果我创建了一个类似于p { background: red }的CSS规则，那么整个框/矩形都会有红色背景，包括每行末尾的“空白”部分。

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

我注意到，默认情况下，当光标位于文本上方时，它会从“箭头”变为“I型光标”；当光标在段落框内但不在文本上方时，则为箭头而非I型光标。

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

- ChrisW

Answer 1

你可以将文本包装在元素中，然后设置它的background和cursor属性来实现。

- remi

Answer 2

据我所知，CSS选择器无法匹配文本节点，因此无法完全按照您的要求进行操作。您需要将文本包装在span中，然后对span进行样式设置。

- mishac

Answer 3

这是一个简单的代码片段，也许可以帮助：

添加了一两个额外的样式..虽然不是必要的..但希望能有所帮助..

p {
    background-color: gray;
    width: 700px;
    height: 500px;
    margin:auto;
}

span {  
    background-color: red;
    width: 500px;
    height: 200px;
    border: 2px blue;
    border-style: dotted dashed;
    font-size: 2em;
    display: block;
    margin:auto;
}

- Neil

---

这样做有问题吗？我是网站开发的新手，有什么建议或更正肯定会有所帮助，而不仅仅是投票。 - Neil