• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • ::selection

    版本:CSS3

    CSS伪类::selection元素应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)。

    语法:

    E::selection{sRules}

    设置对象被选择时的CSS样式。::selection能定义被选择时的background-colorcolortext-shadow(IE11尚不支持定义该属性)。

    ::selection {
      background-color: cyan;
    }
    

    允许属性

    只有一小部分CSS属性可以用于::selection选择器:

    要特别注意的是,background-image会如同其他属性一样被忽略。

    浏览器支持

    IE9+以及新版浏览器都支持::selection
    IE8以及早期IE版本不支持::selection

    例子

    //HTML
    
    this text has special styles when you highlight it.
    <p>also try selecting text in this paragraph.</p>
    
    
    //CSS
    
    ::-moz-selection {
      color: gold;
      background-color: red;
    }
    
    p::-moz-selection {
      color: white;
      background-color: blue;
    }
    
    /* 选中的文本是红色背景,金黄色的字体 */
    ::selection {
      color: gold;
      background-color: red;
    }
     
    
    /*选中的是蓝色背景,白色的字体的段落*/
    p::selection {
      color: white;
      background-color: blue;
    }
    
    this text has special styles when you highlight it.

    also try selecting text in this paragraph.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    ::selection
    {
    color:pink;
    }
    ::-moz-selection
    {
    color:pink;
    }
    </style>
    </head>
    <body>
    	<p>用鼠标选中此文字看效果</p>
    
    </body>
    </html>

    用鼠标选中此文字看效果

    上篇:::placeholder

    下篇:::cue