css有很多选择器,常见的一些大家都知道,也都经常用,例如:#id,.class,:first-of-type,:last-of-type,:nth-of-type(n),:root,:empty等等,这些大家用过都会上手,很难忘记,今天偶尔看到一些不常见的选择器,但是却很实用,就整理一下,避免“看后忘”的毛病。

1.selection选择器,选择被用户选取的元素部分。 只能用于根元素上设置,在div,p上添加是不生效的(.box::selection)

<style type="text/css">
	::selection { color:#ff0000;background: #000000; }
	::-moz-selection { color:#ff0000;background: #000000;}
 </style>

2.first-line选择器,选择第一行的内容。

<style type="text/css">
     .box1 p::first-line{background:#333;color: #fff;}
</style>

3.first-letter选择器,选择首字母

<style type="text/css">
	.box2 p::first-letter{font-size: 200%;color: red;}
</style>

4.:nth-last-of-type选择器,从最后一个子元素开始计数

<style type="text/css">
	.box3 p:nth-last-of-type(2){font-size: 16px;color: red;}
</style>