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规则，则整个框/矩形将具有红色背景，包括每行末尾的“空白”。

有没有办法指定一个选择器，以便在每一行上只有实际文本有红色背景？

我注意到默认情况下，当光标实际超过文本时，光标从“箭头”变为“工字梁”;当它在段落框中的其他地方，而不是文本，那么它是箭头而不是工字梁。

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

Answer 1

您可以做的是将文本包装在 span 元素中，然后将 background 和 cursor 属性设置为它。< / p>

Answer 2

由于CSS选择器与文本节点不匹配，因此我无法完全按照您的意愿进行操作。您必须在一个范围中包装文本，然后设置范围样式。

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;
}

是否有一个CSS选择器来选择矩形框内的文本（内联块）？

3 个答案: