选择器

# 基础选择器

• *：通配选择器
• div：标签选择器
• .class：类选择器
• #id：ID 选择器

# 属性选择器

• [attr]：指定属性
• [attr=val]：属性等于指定值
• [attr*=val]：属性包含指定值
• [attr^=val] ：属性以指定值开头
• [attr$=val]：属性以指定值结尾
• [attr~=val]：属性含多个值，其中一个为指定值
• [attr|=val]：属性是“-”连接的多个字符串，第一个为指定值

# 组合选择器

• A, B：并集选择器，A 和 B
• AB：交集选择器，A 并且也是 B
• A B：后代选择器，A 的所有后代 B
• A > B：子代选择器，A 的所有子代 B
• A + B：相邻兄弟选择器，紧跟 A 之后的 B
• A ~ B：普通兄弟选择器，A 之后的 B

# 伪元素选择器

• ::before：在元素前插入一个行内元素
• ::after：在元素后插入一个行内元素
• ::placeholder：input 元素的 placeholder

# 伪类选择器

结构伪类

• :root：文档的根元素（即 html 元素）
• :empty：无子元素的元素
• :first-letter：元素的首字符（只能应用块级元素）
• :first-line：元素的首行（只能应用块级元素）
• :first-child：作为第一个子元素的元素
• :last-child ：作为最后一个子元素的元素
• :nth-child(n/odd/even)：作为指定顺序索引的子元素的元素
• :nth-last-child(n)：作为指定逆序索引的子元素的元素
• :only-child：作为其父元素唯一子元素的元素
• :first-of-type ：在其兄弟元素中，所属标签的第一个的元素
• :last-of-type：在其兄弟元素中，所属标签的最后一个的元素
• :nth-of-type(n)：在其兄弟元素中，所属标签的指定顺序索引的元素
• :nth-last-of-type(n)：在其兄弟元素中，所属标签的指定逆序索引的元素
• :only-of-type：在其兄弟元素中，是所属标签唯一的元素

条件伪类

• :target：id 属性为当前锚点的元素
• :lang(x)：lang 属性是x的元素
• :is(selector)：匹配指定选择器里的元素
• :not(selector...)：匹配不符合指定选择器的元素

行为伪类

• :focus：获取聚焦的元素
• :active：鼠标按下的元素
• :hover： 鼠标悬浮的元素
• ::selection：光标选中的内容

状态伪类

• :link：有 href 属性的 a 元素
• :visited：已访问有 href 属性的 a 元素（只能应用颜色相关的属性）
• :required：有 require 属性的表单元素
• :optional：无 require 属性的表单元素
• :enabled：无 disabled 属性的表单元素
• :disabled：有 disabled 属性的表单元素
• :checked：被选中的多选框或单选框
• :valid：输入合法的 input 元素（根据 type，require，pattern 属性判断是否合法）
• :invalid：输入不合法的 input 元素
• :in-range：输入在 min 和 max 属性指定范围内的数值框
• :out-of-range：输入在 min 和 max 属性指定范围外的的数值框
• :read-only：只读的元素
• :read-write：可读可写的元素
• :-webkit-full-screen：全屏状态的元素