1、神奇的选择器

很多CSS编码习惯都是清一色的类而无相应的选择器，层层嵌套的标签都包含至少一个类。选择器和类对比起来性能上确实没后者那么好，但如今浏览器对于CSS的解析速度已得到大大的提升，完全可忽略选择器那丁点的性能问题。

可是CSS模块众多，依次推出的选择器也很多。若无特别方法记熟这些选择器对应的功能，也很难将选择器发挥到最大作用。玩转CSS的最关键一步是「能熟悉大部分选择器及其功能与使用场景」。

笔者根据选择器的功能划分出八大类，每个类别的选择器都能在一个使用场景中互相组合，记熟这些类别的选择器，相信就能将选择器发挥到最大作用。以下选择器的常用选项里若打勾可强行记熟，这些选择器都是笔者久经沙场而标记出来且认为是最好用的选择器。

基础选择器

选择器	别名	说明	版本	常用
tag	标签选择器	指定类型的标签	1	√
#id	ID选择器	指定身份的标签	1	√
.class	类选择器	指定类名的标签	1	√
*	通配选择器	所有类型的标签	2	√

层次选择器

选择器	别名	说明	版本	常用
elemP elemC	后代选择器	元素的后代元素	1	√
elemP>elemC	子代选择器	元素的子代元素	2	√
elem1+elem2	相邻同胞选择器	元素相邻的同胞元素	2	√
elem1~elem2	通用同胞选择器	元素后面的同胞元素	3	√

集合选择器

选择器	别名	说明	版本	常用
elem1,elem2	并集选择器	多个指定的元素	1	√
elem.class	交集选择器	指定类名的元素	1	√

条件选择器

选择器	说明	版本	常用
:lang	指定标记语言的元素	2	×
:dir()	指定编写方向的元素	4	×
:has	包含指定元素的元素	4	×
:is	指定条件的元素	4	×
:not	非指定条件的元素	4	√
:where	指定条件的元素	4	×
:scope	指定元素作为参考点	4	×
:any-link	所有包含href的链接元素	4	×
:local-link	所有包含href且属于绝对地址的链接元素	4	×

状态选择器

选择器	说明	版本	常用
:active	鼠标激活的元素	1	×
:hover	鼠标悬浮的元素	1	√
:link	未访问的链接元素	1	×
:visited	已访问的链接元素	1	×
:target	当前锚点的元素	3	×
:focus	输入聚焦的表单元素	2	√
:required	输入必填的表单元素	3	√
:valid	输入合法的表单元素	3	√
:invalid	输入非法的表单元素	3	√
:in-range	输入范围以内的表单元素	3	×
:out-of-range	输入范围以外的表单元素	3	×
:checked	选项选中的表单元素	3	√
:optional	选项可选的表单元素	3	×
:enabled	事件启用的表单元素	3	×
:disabled	事件禁用的表单元素	3	√
:read-only	只读的表单元素	3	×
:read-write	可读可写的表单元素	3	×
:target-within	内部锚点元素处于激活状态的元素	4	×
:focus-within	内部表单元素处于聚焦状态的元素	4	√
:focus-visible	输入聚焦的表单元素	4	×
:blank	输入为空的表单元素	4	×
:user-invalid	输入合法的表单元素	4	×
:indeterminate	选项未定的表单元素	4	×
:placeholder-shown	占位显示的表单元素	4	√
:current()	浏览中的元素	4	×
:past()	已浏览的元素	4	×
:future()	未浏览的元素	4	×
:playing	开始播放的媒体元素	4	×
:paused	暂停播放的媒体元素	4	×

结构选择器

选择器	说明	版本	常用
:root	文档的根元素	3	×
:empty	无子元素的元素	3	√
:nth-child(n)	元素中指定顺序索引的元素	3	√
:nth-last-child(n)	元素中指定逆序索引的元素	3	×
:first-child	元素中为首的元素	2	√
:last-child	元素中为尾的元素	3	√
:only-child	父元素仅有该元素的元素	3	√
:nth-of-type(n)	标签中指定顺序索引的标签	3	√
:nth-last-of-type(n)	标签中指定逆序索引的标签	3	×
:first-of-type	标签中为首的标签	3	√
:last-of-type	标签中为尾标签	3	√
:only-of-type	父元素仅有该标签的标签	3	√

属性选择器

选择器	说明	版本	常用
[attr]	指定属性的元素	2	√
[attr=val]	属性等于指定值的元素	2	√
[attr*=val]	属性包含指定值的元素	3	√
[attr^=val]	属性以指定值开头的元素	3	√
[attr$=val]	属性以指定值结尾的元素	3	√
[attr~=val]	属性包含指定值(完整单词)的元素(不推荐使用)	2	×
[attr\|=val]	属性以指定值(完整单词)开头的元素(不推荐使用)	2	×

伪元素

选择器	说明	版本	常用
::before	在元素前插入的内容	2	√
::after	在元素后插入的内容	2	√
::first-letter	元素的首字母	1	×
::first-line	元素的首行	1	×
::selection	鼠标选中的元素	3	×
::backdrop	全屏模式的元素	4	×
::placeholder	表单元素的占位	4	√

选择器真正的用处不仅仅是说明选项里的描述，更多是搭配起来能起到的最大作用。这些选择器组成的「选择器系统」是整个CSS体系里的核心，使用选择器能带来以下好处。

• 「清晰易读」：对于那些结构与行为分离的写法，使用sass/less编写属性时结构会更清晰易读，减少很多无用或少用的类，保持css文件的整洁性和观赏性
• 「确保一致」：减少修改类而有可能导致样式失效的问题，有时修改类但未确保HTML和CSS的一致而导致样式失效
• 「剔除累赘」：减少无实质性使用的类，例如很多层嵌套的标签，这些标签可能只使用到一个属性，就没必要新建类关联
• 「高效流畅」：使用选择器可实现一些看似只能由JS才能实现的效果，既减少代码量也减少JS对DOM的操作，使得交互效果更流畅

待更新。。。