可指定选择的文字的样式,但只有 2 个属性。
今天在 whtsky的博客 发现了这个CSS伪类——::selection
大家都知道,网页选择文字的颜色多是蓝底色,白前色(Windows 下),
而这个伪类可以使选择文字的样式变得不太单调:
代码示例:
::selection{color:#888;background-color:#EEE;}
::-moz-selection{color:#888;background-color:#EEE;}
::-webkit-selection{color:#888;background-color:#EEE;}
/*上面代码的生效范围为全网页.*/
.test::selection{color:#888;background-color:#EEE;}
/*这行代码则只生效与class="test"的标签.*/
第二部分的代码效果如下:
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
上面的例子已经把 ::selection 的用法写出来了,但除了 color 和 background 我们还能不能加上其他的属性呢?
.test1::selection{background-color:#DDD;font-size:20px;}
上面例子的效果:
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
从例子中我们可以看到,::selection 这个伪类只支持 color 及 background。
Pingback引用通告: 改了改博客的配色喵(还有开学的事) – chenxy.me