CSS3伪类

编写时间：2019-07-18
更新时间：2019-7-19 15:32

作者：鬼小妞

目的：

• UI元素状态伪类选择器； （点击直达）；
• 结构伪类选择器； （点击直达）；
• 层次选择器； （点击直达）；

备注： 本文整理及编写了与css3伪类选择器相关的一些知识，仅供参考，描述不当的地方，请评论指正

状态：待完善2019-7-19

[TOC]

CSS3伪类汇总

UI元素状态伪类选择器

选择器	描述
:link	选择链接元素
:visited	访问过链接元素后的状态
:hover	鼠标悬停其上的元素
:ative	鼠标点击时触发的事件
:focus	当前获取焦点的元素
:enabled	元素处于可用状态
:disabled	元素处于不可用状态
:checked	元素处于选中状态
:selection	当前被选中的内容
:indeterminate	当前选中状态不明确的元素
:read-only	处于只读状态的元素
:read-write	处于读写状态的元素
:required	具有必填要求的元素
:optional	无必须要求填写的元素
:valid	能通过输入校验的元素
:invalid	不能通过输入校验的元素
:in-range	当前处于指定范围的元素
:out-of-range	当前处于超出范围的元素

结构伪类选择器

:root 指定标准： 标签（html文档根节点）

选择器	描述
:root	标签元素

:nth-child 指定标准：父元素

选择器	描述
:only-child	作为其父元素的唯一的匹配类型节点，该元素的样式
:first-child	父元素的第一个子节点
:last-child	父元素的最后一个子节点
:nth-child(odd/event)	父元素的第奇数个/偶数个子节点的元素
:nth-child(xn+y)	父元素的第xn+y个子节点
:nth-last-child(odd/event)	父元素的倒数奇数个/偶数个子节点的元素
:nth-last-child(xn+y)	父元素的倒数第xn+y个子节点

:nth-of-type指定标准：兄弟元素（有共同类型、同级元素的）

选择器	描述
:first-of-type	第一个兄弟元素节点
:last-of-type	最后一个兄弟元素节点
:nth-of-type(odd/event)	第奇数个/偶数个兄弟元素节点
:nth-of-type(xn+y)	第xn+y个兄弟元素节点
:nth-last-of-type(odd/event)	倒数奇数个/偶数个兄弟节点
:nth-last-of-type(xn+y)	倒数奇数第xn+y个个兄弟节点

层次选择器

选择器	示例	描述
后代选择器	div p	选择 元素内部的所有 元素
子选择器	div > p	选择父元素为 元素的所有 元素
相邻兄弟选择器	div + p	选择紧接在 元素之后的所有 元素
通用选择器	div ~ ul	选择前面有 元素的每个 元素

参考

• CSS3新增的伪类选择器，让你体验使用CSS3的快感。
• css3第四篇，选择器三(伪类选择器一）

转载于:https://juejin.im/post/5d2fdf276fb9a07ee1695f21