今天说一个简单的伪元素::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
起作用
新闻热点
疑难解答