css的“::selection”选择器

欢迎大家访问我自己架的博客站点 码厩技术博客！

在CodeIgniter框架基本案例中看到了一个新型的选择器，以前没有关注到，就是两个冒号加selection。

::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }

实现的效果就是文字选中的背景色设置，遗憾的是ie9下并没有看到这样棒的效果。

查资料之后才知道这是css3中推出来的伪元素，css3中伪类用冒号表示，伪元素用双冒号表示。

如果网站要兼容ie系列的话，就最好不要使用这种表达方式。

下面是从百度百科css3条目中引用的部分内容：

选择符类型	表达式	描述
子串匹配的属性选择符	E[att^="val"]	匹配具有att属性、且值以val开头的E元素
子串匹配的属性选择符	E[att$="val"]	匹配具有att属性、且值以val结尾的E元素
子串匹配的属性选择符	E[att*="val"]	匹配具有att属性、且值中含有val的E元素
结构性伪类	E:root	匹配文档的根元素。在HTML中，根元素永远是HTML
结构性伪类	E:nth-child(n)	匹配父元素中的第n个子元素E
结构性伪类	E:nth-last-child(n)	匹配父元素中的倒数第n个结构子元素E
结构性伪类	E:nth-of-type(n)	匹配同类型中的第n个同级兄弟元素E
结构性伪类	E:nth-last-of-type(n)	匹配同类型中的倒数第n个同级兄弟元素E
结构性伪类	E:last-child	匹配父元素中最后一个E元素
结构性伪类	E:first-of-type	匹配同级兄弟元素中的第一个E元素
结构性伪类	E:only-child	匹配属于父元素中唯一子元素的E
结构性伪类	E:only-of-type	匹配属于同类型中唯一兄弟元素的E
结构性伪类	E:empty	匹配没有任何子元素（包括text节点）的元素E
目标伪类	E:target	匹配相关URL指向的E元素
UI元素状态伪类	E:enabled	匹配所有用户界面（form表单）中处于可用状态的E元素
UI元素状态伪类	E:disabled	匹配所有用户界面（form表单）中处于不可用状态的E元素
UI元素状态伪类	E:checked	匹配所有用户界面（form表单）中处于选中状态的元素E
UI元素状态伪类	E::selection	匹配E元素中被用户选中或处于高亮状态的部分
否定伪类	E:not(s)	匹配所有不匹配简单选择符s的元素E
通用兄弟元素选择器	E ~ F	匹配E元素之后的F元素

转载于:https://www.cnblogs.com/catroll/archive/2011/12/07/2278775.html