如何将 css 样式应用于我突出显示的文本？就像在 MSWord 中突出显示然后单击粗体答案

【问题标题】：How can I apply css styles to text that I highlight? Like highlighting in MSWord then clicking bold如何将 css 样式应用于我突出显示的文本？就像在 MSWord 中突出显示然后单击粗体
【发布时间】：2018-10-31 21:06:58
【问题描述】：

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

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

例如：

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

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

这是我知道的唯一应用 span 但想了解如何将其应用于用户突出显示的内容的方法。是否有检测用户突出显示的代码？

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

【问题讨论】：

最初的答案说使用::selection 是错过了船。 ::selection 允许您设置当前选定文本 的样式。一旦选择更改，这些样式将不再适用。要选择文本并“永久”更改它，您必须找到当前选择的内容，然后通过 Javascript 操作 DOM 以使用 <span class="something"> （或“strong”或“em”，视情况而定）包围该文本

标签： css

【解决方案1】：

我想你在找::selection

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

::selection {
  background: cyan;
}

Some text

【讨论】：

这会将青色背景设置为选定的文本，但一旦取消选择文本，它就会消失。 OP 想要： 1. 选择一些文本 2. 选择“粗体” 3. 即使在取消选择文本后文本仍保持粗体。
目的是让网站编辑者快速进行格式编辑购买突出显示他们想要编辑的内容并单击可用的 CSS 样式的预制列表。我之前在玩过该代码，但对于如何将预制的 css 样式应用于选择或突出显示的内容感到困惑。编辑：是的，正如斯蒂芬所说的那样
我的错。但我认为不使用 javascript 是不可能的。

【解决方案2】：

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

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

&lt;p&gt;Hello, &lt;span class="red"&gt;RED HIGHLIGHT&lt;/span&gt;!&lt;/p&gt;

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

JQuery selector for highlighted text

祝你好运

【讨论】：