selection伪元素小解_html/css_WEB-ITnose
程序员文章站
2022-05-31 17:25:21
...
上一篇:《RGBA与Opacity区别小解》 selection伪元素只能设置background-color和color两个属性,不能设置除此之外的其他任何属性
伪类写法使用单冒号:,如:last-child
伪元素写法使用双冒号::,如::first-line和裆下的::selection
上一篇:《RGBA与Opacity区别小解》
今天说一个简单的伪元素::selection,它的用武之地仅在于改变选中文本时文本的颜色和文本背景颜色。
网页默认选择文本后,文字颜色为白色,文字背景颜色为蓝色,要改变这种选择样式,可以使用::selection伪元素来分别设置文本颜色和文本背景颜色。
在线查看高清无码效果可以猛戳这里这里或直接点击下面的网址:
http://codepen.io/myvin/pen/bdLXvK
给出例子,先来个段落:
HTML Markup:
十八新娘八十郎,苍苍白发对红妆。 鸳鸯被里成双夜,一树梨花压海棠。
样式修饰:
p::selection{ background-color: red; color:blue;}
效果如下:
这里有两点需要注意:
在CSS3中selection伪元素使用双冒号::,不能使用单冒号:,写单冒号不会起到selection的作用,因为在CSS3规范中规定:
在CSS2中伪类和伪元素都使用单冒号:,但是在FF37.0.2版本和Chrome 43.0.2357.130版本中,单冒号:selection不起作用,before和after起作用
推荐阅读
-
水平居中--行内元素、定宽块、不定宽块_html/css_WEB-ITnose
-
jQuery 如何实现滚动到某元素调用相应的函数_html/css_WEB-ITnose
-
网页元素在没有id/名称/时候怎么样取它的文本呢?_html/css_WEB-ITnose
-
看好你的门-客户端传数据(10)-不安全的HTML禁用元素_html/css_WEB-ITnose
-
分享用CSS3伪元素和html制作一个发光的边框实例代码
-
CSS伪类:after支不支持播放音频文件_html/css_WEB-ITnose
-
selection伪元素小解_html/css_WEB-ITnose
-
后端码农谈前端(HTML篇)第二课:常见元素_html/css_WEB-ITnose
-
phantomjs iframe 访问元素_html/css_WEB-ITnose
-
了解HTML 元素分类_html/css_WEB-ITnose