好玩的CSS属性之Selection

jason3721

于 2012-12-26 16:36:09 发布

阅读量419

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/jason3721/article/details/8439765

CSS 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了CSS中鲜为人知的::selection伪元素属性，它能够改变用户在网页上选中文本时的背景色和字体颜色。文章还探讨了该属性的浏览器兼容性问题，并通过实例展示了如何使用此属性来定制文本选中的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

近来一直在研究css这东西，在w3cplus上看博文时发现了::selection这个属性，相信很多人都不知道这个属性的存在。
该属性用于在网页中选择一段文字时，赋予的属性——文字的背景和颜色……

/*Webkit,Opera9.5+,Ie9+*/    
::selection {  
background: 颜色值；  
color:颜色值；    
}   
/*Mozilla Firefox*/    
::-moz-selection {  
background: 颜色值；  
color:颜色值；     
}

大家都知道啦，这种高级特性IE9一下是不会有的。一般来说，在网页中选择一段文字时，都是深蓝色的背景，白色的字体颜色。

好玩的CSS属性之Selection - chen_zx_happy - chen_zx_happy的博客

就如上图所示啦，selection这个属性就是用于改变这些……
我们修改下上面的代码，看下发生了什么变化。

p::selection {
 color: #fff;
 background-color: #9C3;
  }
p::-moz-selection {
    background: #9C3;
    color: #fff;
  }

在w3cplus中，博主提到过“是否可以改其他的属性”这个问题，比如选中文字能否加大文字的字体号，并做了实验，结果证明了：selection只能更改变background和color这两个属性。要做其他的什么，就用js来实现吧~~~