CSS 选择器无疑是其核心之一，对于基础选择器以及一些常用伪类必须掌握。下面列出了常用的选择器。
基础选择器
- 标签选择器:
h1 - 类选择器:
.checked - ID选择器：
#picker - 通配选择器：
*
属性选择器
[attr]: 指定属性的元素;[attr=val]: 属性等于指定值的元素;[attr*=val]: 属性包含指定值的元素;[attr^=val]：属性以指定值开头的元素；[attr$=val]：属性以指定值结尾的元素；[attr~=val]：属性包含指定值(完整单词)的元素(不推荐使用);[attr|=val]：属性以指定值(完整单词)开头的元素(不推荐使用);
例如：懒加载1
<img data-src="1.png"/>
1
document.querySelectorAll('img[data-src]');//使用标签选择器和属性选择器
组合选择器
- 相邻兄弟选择器:
A + B; - 普通兄弟选择器:
A ~ B; - 子选择器:
A > B; - 后代选择器:
A B;
伪类
条件伪类
:lang()：基于元素语言来匹配页面元素；:dir()：匹配特定文字书写方向的元素；:has()：匹配包含指定元素的元素；:is()：匹配指定选择器列表里的元素；:not()：用来匹配不符合一组选择器的元素；
行为伪类
:active：鼠标激活的元素；:hover： 鼠标悬浮的元素；::selection：鼠标选中的元素
状态伪类
:target: 当前锚点的元素;:link: 未访问的链接元素;:visited: 已访问的链接元素;foucs: 输入聚焦的表单元素;*:required：输入必填的表单元素；*:valid：输入合法的表单元素；*:invalid：输入非法的表单元素；*:in-range：输入范围以内的表单元素；*:out-of-range：输入范围以外的表单元素；*:checked：选项选中的表单元素；*:optional：选项可选的表单元素；*:enabled：事件启用的表单元素；*:disabled：事件禁用的表单元素；*:read-only：只读的表单元素；*:read-write：可读可写的表单元素；*:blank：输入为空的表单元素；*:current()：浏览中的元素；*:past()：已浏览的元素；*:future()：未浏览的元素；
结构伪类
:root：文档的根元素；:empty：无子元素的元素；:first-letter：元素的首字母；:first-line：元素的首行；:nth-child(n)：元素中指定顺序索引的元素；:nth-last-child(n)：元素中指定逆序索引的元素；；:first-child：元素中为首的元素；:last-child：元素中为尾的元素；:only-child：父元素仅有该元素的元素；:nth-of-type(n)：标签中指定顺序索引的标签；:nth-last-of-type(n)：标签中指定逆序索引的标签；:first-of-type：标签中为首的标签；:last-of-type：标签中为尾标签；:only-of-type：父元素仅有该标签的标签；
伪元素
::before：在元素前插入内容；::after：在元素后插入内容；