Html css类选择器来选择div内的文本
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7787520/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css class selector to select text inside a div
提问by Jamex
I have a div with a classname "test". The class "test" has a cursor pointer assigns to it. The class also has a fixed width of 200px. Inside the div is text of length that is shorter than the width of the div. I don't want the point to appear when the mouse is placed in the blank part of the div.
我有一个类名为“test”的 div。类“test”有一个分配给它的游标指针。该类还具有 200px 的固定宽度。div 内是长度短于 div 宽度的文本。我不希望鼠标放在 div 的空白部分时出现该点。
Is there a way that I can assign the css pointer to the text inside the div without wrapping the text inside another <span>
tag. I just don't want to go back and add the span tag to every single div and rewrite the javascript.
有没有一种方法可以将 css 指针分配给 div 内的文本,而无需将文本包装在另一个<span>
标签内。我只是不想回去将 span 标签添加到每个 div 并重写 javascript。
I am thinking of something like this pseudo css code
我在想类似这个伪 css 代码的东西
.test.text {
cursor:pointer;
}
回答by Bojangles
CSS doesn't work this way. As biziclop says in the comments, text nodes can't be selected with CSS. You'll either have to wrap your text in a <span>
and use
CSS 不是这样工作的。正如 biziclop 在评论中所说,文本节点不能用 CSS 选择。您要么必须将文本包裹在 a 中<span>
并使用
.test span {
cursor: pointer;
}
With
和
<div class="test">
<span>Text</span>
</div>
Or set .test
to display: inline
, but that won't let you give it a width, which is not the behaviour you want. <span>
s are fine, in this case.
或者设置.test
为display: inline
,但这不会让你给它一个宽度,这不是你想要的行为。<span>
s 很好,在这种情况下。
回答by biziclop
You could try using the :before
or :after
pseudo-elements.
您可以尝试使用:before
或:after
伪元素。
I was playing with this solution, for 1-line divs:
http://jsfiddle.net/yAfKw/
我正在玩这个解决方案,用于 1 行 div:http:
//jsfiddle.net/yAfKw/
Multi-line divs:
http://jsfiddle.net/yAfKw/1/
多行 div:http:
//jsfiddle.net/yAfKw/1/
Works in Firefox, does not work in Safari.
适用于 Firefox,不适用于 Safari。