CSS 伪元素

::selection 伪元素用于将样式应用于文档或页面的部分，该部分已通过用户干预突出显示，例如单击并拖动鼠标来选择文本。

一小部分 CSS 属性可以与 ::selection 伪元素一起使用，如下所示:

  • color属性

  • background

  • text-decoration 及其相关属性

  • text-shadow

  • webkit-text-stroke-color、-webkit-text-fill-color 和 -webkit-text-stroke-width

忽略背景图像属性。

语法

selector::selection {
    /* ... */
}

问题:

  • 出于美观原因，不建议覆盖选定的文本样式。

  • 如果文本样式已被覆盖，请确保对文本应用高对比度，因为这对于用户来说是清晰易读的。

  • 何时在 Windows 高对比度模式下，用户输入的文本以与占位符文本相同的样式呈现，因此很难区分占位符文本和输入的文本。

  • 占位符不能替代 <label> 元素。辅助技术无法解析 <input> 元素。

CSS ::selection 示例

这里是 ::selection 伪元素示例-:

<html> 
<head>
<style>
   .highlight::selection { 
      color: yellow;
      background: brown;
   } 
</style>
</head>
<body>
   <p class="highlight">选择我！！！ 看看效果。</p>
   <p>没有适用于我的样式。</p>
</body>
</html>