可能是最全最易记的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 |
优势
话说选择器如果没有用处，那W3C还干嘛把它纳入到标准里面呢？选择器的劣势就不多说了，使用不当可能会引起解析性能问题，这个对于现代浏览器来说几乎可忽略，除非你还是IE的忠实粉丝。使用选择器有什么好处呢，我给大家总结一下。
- 对于那些结构与行为分离的写法，使用Sass/Less书写属性时结构会更加清晰易读
- 减少很多无用或者少用的类名，保持css文件的整洁性和观赏性，代码也是一门艺术
- 减少修改类名而有可能导致样式失效的问题，有时修改类名没有确保HTML中和CSS中的一致而导致样式失效
- 减少没有实质性使用的类名，例如很多层嵌套的标签，这些标签可能只使用到一个CSS属性，就没有必要建个类名来关联
- 使用选择器可完成很多曾经需要配合JS来完成的交互效果，既可减少代码量也可减少JS对DOM的操作，使得交互效果更流畅