[分享]css3文字选中

CSS3 提供了一种文本被选中时的样式控制方法。简单来说，就是当用户鼠标选中一段文本时，该文本会呈现出不同的样式。 ::selection { background: 00BFFF; color: f...

CSS3 提供了一种文本被选中时的样式控制方法。简单来说，就是当用户鼠标选中一段文本时，该文本会呈现出不同的样式。

 ::selection {
    background: #00BFFF;
    color: #fff;
  } 

::selection 这个伪元素可以作用于任何文本元素。上面的代码将被选中的文本背景色设置为浅蓝色，字体颜色设置为白色。

不过需要注意的是，该属性目前仅被少数浏览器支持，如 Chrome、Firefox 等较新的版本。而在旧版浏览器中，则不支持这个特性。如果需要兼容旧版浏览器，则需要使用 JavaScript 或其他技术来实现。

除了 ::selection，还有 ::-moz-selection 和 ::-webkit-selection，它们分别针对 Firefox 和 Webkit 浏览器的选中效果进行控制。在使用时，需要分别为不同的浏览器设置对应的样式。

 ::-moz-selection {
    background: #00BFFF;
    color: #fff;
  }
  ::-webkit-selection {
    background: #00BFFF;
    color: #fff;
  } 

当然，也可以使用 JavaScript 来实现更灵活、细致的选中效果。例如，我们可以为选中的文本添加特定的 CSS 类，然后通过类选择器来设置不同的样式。

 window.addEventListener('mouseup', function() {
    var selectedText = window.getSelection().toString();
    if (selectedText.length > 0) {
      var newText = '<span class="selected">' + selectedText + '</span>';
      document.execCommand('insertHTML', false, newText);
    }
  }); 

上面的代码是一个简单的 JavaScript 示例，它会在用户选中一段文本后将该文本包含在一个 span 标签内，并添加 selected 类。接着，我们就可以通过以下的 CSS 代码来为这个类设置样式：

 .selected {
    background: #00BFFF;
    color: #fff;
  } 

通过这样的方式，我们就可以自行定义并控制 HTML 文本被选中时的样式了。