Question

如何突出显示鼠标选择段落中的文字。我想我必须使用一些CSS3属性，但我不知道该使用什么。

见下图，这就是我想做的......

在这里，您可以看到当有人选择该部分时，他们已经更改了背景颜色和文字颜色。

Answer 1

您只需要更改伪选择器::selection。

要使其在Firefox上正常使用，您必须使用特定的::-moz-selection selector 另外。

基本示例：

＆＃13;

*::selection {
  background: red;
  color: blue;
}

*::-moz-selection {
  background: red;
  color: blue;
}

＆＃13;

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

＆＃13;

Answer 2

您可以::selection（和::-moz-selection）根据需要定制颜色。这可以是整个文档或特定元素。

https://jsfiddle.net/gRoberts/ozb5orLy/1/

Answer 3

您可以使用CSS执行此操作，使用selection

Example here

Answer 4

您可以使用以下css进行文字选择。

::-moz-selection { /* Code for Firefox */
    color: red;
    background: yellow;
}

::selection {
    color: red;
    background: yellow;
}

Answer 5

使用CSS＆＃39; s :: selection

::selection {
    background-color: yellow
}

Answer 6

使用::selection选择器可以完成这项工作。取自this site

您今天可以使用的那些酷炫的CSS3声明之一是 :: selection，它会覆盖您的浏览器级或系统级文本用您选择的颜色突出显示颜色

p::selection {
  background-color: #fff2a8
}

p::-moz-selection {
  background: #fff2a8;
}

Answer 7

<html>
<head>
<style>
p1:hover {
    background-color: yellow;
}
</style>
</head>
<body>

<p>How to highlight the text in paragraph on selection by mouse. <p1>I think I have to use some CSS3 property</p1> but I do not know what to use.

see the below image, that is what I want to do...</p>

<br>


<!-- So you have to use CSS and Using hover you can do that i have already upload an image to show you the example how it's work    -->

</body>
</html>

如何突出段落中的文字

7 个答案: