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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 11:08:31  来源:igfitidea点击:

css class selector to select text inside a div

htmlcsscss-selectors

提问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 .testto 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.

或者设置.testdisplay: inline,但这不会让你给它一个宽度,这不是你想要的行为。<span>s 很好,在这种情况下。

回答by biziclop

You could try using the :beforeor :afterpseudo-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。