易记的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
::selection	鼠标选中的元素	3

状态选择器

选择器	说明	版本
:target	当前锚点的元素	3
:link	未访问的链接元素	1
:visited	已访问的链接元素	1
: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
:first-letter	元素的首字母	1
:first-line	元素的首行	1
: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

使用选择器的优势

• 对于那些结构与行为分离的写法，使用Sass/Less书写属性时结构会更加清晰易读
• 减少很多无用或着少用的类名，保持css文件的整洁性和观赏性，代码也是一门艺术
• 减少修改类名而有可能导致样式失效的问题，有时修改类名没有确保HTML中和CSS中的一致而导致样式失效
• 减少没有实质性使用的类名，例如很多层嵌套的标签，这些标签可能只使用到一个CSS属性，就没有必要建个类名来关联
• 使用选择器可完成很多曾经需要配合JS来完成的交互效果，既可减少代码量也可减少JS对DOM的操作，使得交互效果更流畅

css选择器性能

此外，使用css选择器时，需注意性能：

CSS选择器匹配规则

CSS选择器从右向左的匹配规则

浏览器样式匹配规则主要分四个类别

• ID 规则，这第一个类别包含了那些将 ID 选择器作为关键选择器的规则
• Class 规则，如果一个规则将一个 class 明确作为它的关键选择器，那么它就属于该类别
• 标签规则，如果一条规则将一个标签作为它的关键选择器，那么这条规则就属于该类别
• 通用规则，不属于上面那些类别的规则都属于这个类别

内容来源参考:

1. 可能是最全最易记的CSS选择器分类大法
2. CSS选择器性能分析