代码之家 › 专栏 › 技术社区 › ChrisW

是否有CSS选择器来选择矩形框中的文本(内联块)?

css-selectors css

ChrisW · 技术社区 · 15 年前

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

例如,HTML片段 <p>The quick brown fox jumped over the lazy dog</p> 可以这样布置:

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

如果我创建一个CSS规则 p { background: red } 然后整个框/矩形将有一个红色背景,包括每行末尾的“空白”。

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

我注意到,默认情况下,当光标实际位于文本上方时,光标从“箭头”变为“i-beam”;当光标位于段落框中的其他位置,而不是位于文本上方时,则它是箭头而不是i-beam。

如果我指定一个明确的规则 p { cursor: crosshair } 然后它在矩形框内的任何地方都有效。同样,是否可以只在光标实际位于文本上时选择规则?

3 回复 | 直到 11 年前

remi 15 年前

您可以做的是将文本换行到跨度元素,然后设置背景和光标它的属性。

mishac 15 年前

据我所知,没有办法精确地执行您想要的操作,因为CSS选择器不匹配文本节点。你必须在一个跨距内包装文本,然后设置跨距样式。

-1

Neil 11 年前

jsut一个简单的代码片段可能有助于:

添加了一两个样式。但不需要。希望它有帮助。

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

推荐文章

Monica · 使用Selenium和Python在没有url的情况下单击下载文件

2 年前

Kevin Rodgers Jr. · Python BeautifulSoup:在in select语句中排除其他标记

3 年前

Arad · 即使使用相同的选择器,外部样式表也会覆盖内部样式表

7 年前

user1032531 · jQuery Validate require\u from\u group并按名称选择

7 年前

Christian Luneborg · 星级评定不起作用

7 年前

Gabriel Morais · CSS未应用媒体查询

7 年前

Kevin · CSS属性选择器中的“i”是什么意思?[副本]

7 年前

S syed · 如何在javascript中删除DIV标记内的CSS类?[副本]

7 年前

Karos papermoon · Div和定位问题

7 年前

user9549074 · 如何从CSS中的输入文本中设置最后一个字符的样式?

7 年前