css3 中的伪类和伪元素
什么是伪类，什么是伪元素
伪类是用来添加特殊状态的选择器,它们以冒号(:)开头。伪类可以添加到任何现有的选择器上,用来选择处于特定状态的元素。
伪元素是用来选择元素的特定部分的选择器,它们以双冒号(::)开头。伪元素可以创建出在文档树中不存在的元素。
css3 中常见的伪类:
- :root - 选择文档的根元素
- :nth-child(n) - 匹配父元素中的第n个子元素
- :nth-last-child(n) - 匹配父元素中的倒数第n个子元素
- :nth-of-type(n) - 匹配父元素中相同类型的第n个子元素
- :nth-last-of-type(n) - 匹配父元素中相同类型的倒数第n个子元素
- :first-child - 匹配父元素中的第一个子元素
- :last-child - 匹配父元素中的最后一个子元素
- :first-of-type - 匹配父元素中相同类型的第一个子元素
- :last-of-type - 匹配父元素中相同类型的最后一个子元素
- :only-child - 匹配父元素中唯一的子元素
- :only-of-type - 匹配父元素中唯一的相同类型子元素
- :empty - 匹配没有子元素(包括文本节点)的元素
- :target - 匹配URL的锚点引用的元素
- :enabled - 匹配可用的表单控件元素
- :disabled - 匹配禁用的表单控件元素
- :checked - 匹配被选中的表单控件元素(如单选框、复选框)
- :indeterminate - 匹配处于不确定状态的表单控件元素
- :valid - 匹配通过验证的表单控件元素
- :invalid - 匹配没有通过验证的表单控件元素
- :in-range - 匹配其值在指定范围内的元素
- :out-of-range - 匹配其值超出指定范围的元素
- :required - 匹配有required属性的表单控件元素
- :optional - 匹配没有required属性的表单控件元素
- :read-only - 匹配只读属性为true的表单控件元素
- :read-write - 匹配可读写的表单控件元素
- :lang(language) - 匹配指定语言的元素
- :not(selector) - 匹配不符合指定选择器的元素
- :hover - 匹配鼠标悬停在其上的元素
- :active - 匹配当前被激活的元素
- :focus - 匹配当前获得焦点的元素
- :visited - 匹配已被访问过的链接元素
CSS3伪元素:
- ::before - 在元素内容之前插入生成内容
- ::after - 在元素内容之后插入生成内容
- ::first-line - 选择元素中的第一行
- ::first-letter - 选择元素中的第一个字母
- ::selection - 选择被用户选中的部分
- ::placeholder - 选择表单控件的占位符