结构性伪类选择器
所谓的结构性伪类选择器就是根据元素在文档中出现的位置来选择元素。这些选择器既可以单独使用也可以搭配使用
- 根元素选择器 :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 | 选择被选中的input元素 |
:default | 选择默认元素 |
:valid 和 :invalid | 根据输入验证选择有效或者无效的元素 |
:in-range和 out-of-range | 选择指定范围之内或者之外受限的input元素 |
:required 和:optional | 根据是否允许:required属性选择input元素 |
使用到动态伪类选择器
- :link选择链接元素
- :visited选择用户已访问的链接元素
- :hover选择用户鼠标悬停在其上的任意元素
- :active选择当前被用户激活的元素,值域激活的诠释就要看浏览器了,大多数是鼠标点击的情况下 使用这个选择器
- :focus匹配当前获得焦点的元素
其他伪类选择器
- :not(选择器)对任意选择取反
- :empty选择没有定义子元素的元素
- :lang(目标语言)选择器匹配基于lang全局属性值的元素
- :target选择器匹配URL标识符指向的元素,我认为这个功能就好像你点击目录中的一项,然后跳转当相应的位置,此时target选择器应用的样式就是跳转到的这个元素。