Question

我正在创建一个图形用户界面，其中的下拉菜单填充了CSS样式（粗体，斜体，更改词的颜色等）。我遇到的问题是当我应用这些样式时，它适用于整个段落而不是单个单词。如何编码以识别突出显示的内容，并将格式专门应用于该内容。

我想将跨度仅应用于突出显示的部分。怎么样？

例如：

    <style>
    .red { 
    color: red; 
    }
    </style>

    <body>
    <p>This <span class="red">is a</span> test.</p>
    </body>

这是我知道应用跨度的唯一方法，但我想学习如何将其应用于用户突出显示的内容。是否存在检测到用户突出显示的代码？

编辑：目标是突出显示，将CSS样式应用于突出显示的内容，删除突出显示并且样式仍然存在。

Answer 1

我认为您正在寻找::selection

https://developer.mozilla.org/en-US/docs/Web/CSS/::selection

::selection {
  background: cyan;
}

Some text

Answer 2

如果只想突出显示span.red，请使用::selection伪元素，如下所示：

span.red::selection { background-color: red }

<p>Hello, <span class="red">RED HIGHLIGHT</span>!</p>

Answer 3

尝试一下。它应该为您工作。我们有一个ID为bg-span的跨度，将在其上应用样式。

<!DOCTYPE html>
<html>
<head>
<style>

#bg-span {
    background-color: #f18973;
}
</style>
</head>
<body>

<p>Set a <span id="bg-span">background</span> color for only a part of a text.</p>

</body>
</html>

Answer 4

我搜索并找到了一种解决方案，可以通过JavaScript获取选中/突出显示的文本并将其隐藏。
您可以使用此解决方案并更改代码，以用span包裹所选文本并将所选的class添加到该span。

JQuery selector for highlighted text

祝你好运

如何将CSS样式应用于突出显示的文本？就像在MSWord中突出显示然后单击加粗

4 个答案: