selection伪元素小解_html/css_WEB-ITnose

上一篇：《RGBA与Opacity区别小解》

今天说一个简单的伪元素::selection，它的用武之地仅在于改变选中文本时文本的颜色和文本背景颜色。

网页默认选择文本后，文字颜色为白色，文字背景颜色为蓝色，要改变这种选择样式，可以使用::selection伪元素来分别设置文本颜色和文本背景颜色。

在线查看高清无码效果可以猛戳这里这里或直接点击下面的网址：

http://codepen.io/myvin/pen/bdLXvK

给出例子，先来个段落：

HTML Markup:

<p>十八新娘八十郎，苍苍白发对红妆。 鸳鸯被里成双夜，一树梨花压海棠。</p>

样式修饰:

p::selection{	background-color: red;	color:blue;}

效果如下：

这里有两点需要注意：

selection伪元素只能设置background-color和color两个属性，不能设置除此之外的其他任何属性

在CSS3中selection伪元素使用双冒号::，不能使用单冒号:，写单冒号不会起到selection的作用，因为在CSS3规范中规定：

伪类写法使用单冒号:，如:last-child

伪元素写法使用双冒号::，如::first-line和裆下的::selection

在CSS2中伪类和伪元素都使用单冒号:，但是在FF37.0.2版本和Chrome 43.0.2357.130版本中，单冒号:selection不起作用，before和after起作用

上一篇：《RGBA与Opacity区别小解》