使用结构性伪类选择器
- 根元素选择器 :root 总是返回html元素
- 子元素选择器
- :first-child 匹配由包含它们的元素定义的第一个子元素。可以作为修饰符和其他选择器组合使用
- :last-child 匹配由包含它们的元素定义的最后一个元素
- :only-child 匹配父元素包含的唯一子元素
- :only-of-type 匹配父元素中只有一个它这种类型元素的子元素
- :nth-child选择器
- :nth-child(n) 父元素的第n个子元素
- :nth-last-child(n) 父元素的倒数第n个子元素
- :nth-of-type(n) 父元素定义类型的第n个子元素
- :nth-last-of-type(n) 父元素定义类型倒数第n个子元素
使用UI伪类选择器
- 选择启用或禁用元素 :enabled :disabled
- 选择已勾选元素 :checked
- 选择默认元素 :default
- 选择有效和无效的input元素 :valid :invalid
- 选择限定范围的input元素 :in-range :out-of-range
- 选择必需和可选的input元素 :required :optional
使用动态伪类选择器
- :link匹配链接 :visited匹配用户已访问链接
- :hover 匹配用户鼠标悬停在其上的任意元素
- :active匹配当前被用户激活的元素
- :focus匹配当前获得焦点的元素
其他伪类元素
- 否定选择器 :not(<选择器>)对任意选择器取反
- :empty 匹配没有定义子元素的元素
- :lang(<目标语言>)匹配基于lang全局属性值的元素
- :target 匹配URL片段标识符指向的元素