CSS3伪类

2019-07-18 500 阅读3分钟

编写时间：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> 标签（html文档根节点）

选择器	描述
`:root`	`<html>`标签元素

: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>` 元素的所有 `<p>` 元素
相邻兄弟选择器	div + p	选择紧接在 `<div>`元素之后的所有 `<p>` 元素
通用选择器	div ~ ul	选择前面有 `<div>` 元素的每个`<ul>` 元素

参考

友情链接：