CSS 伪类: 什么是 CSS 伪类？CSS 伪类怎么分类？ CSS 伪类有哪些？以及分类对应的伪类

Posted 2021-08-02 黑木令

本章讲解的内容为 CSS 伪类 。

废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。

一: 什么是 CSS 伪类？

1. CSS 伪类是用来添加一些 '选择器' 的特殊效果(特殊状态)。

2. 伪类实际使用场景举例:
   1. 设置鼠标悬停在元素上时的样式 。
   2. 为已访问和未访问链接设置不同的样式 。
   3. 设置元素获得焦点时的样式 。

二: CSS 伪类选择器的分类 （4类）:

1. 动态伪类选择器。

2. UI元素状态伪类选择器。

3. 结构伪类选择器。

4. 否定伪类选择器。

三: 所有CSS伪类/元素- - -总览

序号	选择器	示例	示例说明
1	:checked	input:checked	选择所有选中的表单元素
2	:disabled	input:disabled	选择所有禁用的表单元素
3	:empty	p:empty	选择所有没有子元素的p元素
4	:enabled	input:enabled	选择所有启用的表单元素
5	:first-of-type	p:first-of-type	选择的每个 p 元素是其父元素的第一个 p 元素
6	:in-range	input:in-range	选择元素指定范围内的值
7	:invalid	input:invalid	选择所有无效的元素
8	:last-child	p:last-child	选择所有p元素的最后一个子元素
9	:last-of-type	p:last-of-type	选择每个p元素是其母元素的最后一个p元素
10	:not(selector)	:not§	选择所有p以外的元素
11	:nth-child(n)	p:nth-child(2)	选择所有 p 元素的父元素的第二个子元素
12	:nth-last-child(n)	p:nth-last-child(2)	选择所有p元素倒数的第二个子元素
13	:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
14	:nth-of-type(n)	p:nth-of-type(2)	选择所有p元素第二个为p的子元素
15	:only-of-type	p:only-of-type	选择所有仅有一个子元素为p的元素
16	:only-child	p:only-child	选择所有仅有一个子元素的p元素
17	:optional	input:optional	选择没有"required"的元素属性
18	:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性
19	:read-only	input:read-only	选择只读属性的元素属性
20	:read-write	input:read-write	选择没有只读属性的元素属性
21	:required	input:required	选择有"required"属性指定的元素属性
22	:root	root	选择文档的根元素
23	:target	#news:target	选择当前活动#news元素(点击URL包含锚的名字)
24	:valid	input:valid	选择所有有效值的属性
25	:link	a:link	选择所有未访问链接
26	:visited	a:visited	选择所有访问过的链接
27	:active	a:active	选择正在活动链接
28	:hover	a:hover	把鼠标放在链接上的状态
29	:focus	input:focus	选择元素输入后具有焦点
30	:first-letter	p:first-letter	选择每个 元素的第一个字母
31	:first-line	p:first-line	选择每个 元素的第一行
32	:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 元素
33	:before	p:before	在每个 元素之前插入内容
34	:after	p:after	在每个 元素之后插入内容
35	:lang(language)	p:lang(it)	为 元素的lang属性选择一个开始值

1. CSS anchor 锚(动态)伪类选择器:

序号	anchor (锚)伪类	示例	示例说明
1	:link	a:link	未访问的链接
2	:visited	a:visited	已访问的链接
3	:hover	a:hover	把鼠标放在链接上的状态 (鼠标划过链接)
4	:active	a:active	已选中的链接

“anchor (锚)伪类选择器” 详细讲解地址: ‘CSS伪类–锚伪类选择器(动态伪类选择器)-详细总结’ 。

图片示例总览:

2. CSS UI元素状态伪类选择器

序号	UI元素状态伪类选择器	示例	示例说明
1	:focus
2	:checked
3	:selection
4	:enabled
5	:disabled
6	:read-write
7	:read-only
8	::before
9	::after

“UI元素状态伪类选择器” 详细讲解地址: ‘整理中’

3. CSS 结构伪类选择器

序号	结构伪类选择器	示例	示例说明
1	:first-child
2	:last-child
3	:nth-child()
4	:nth-last-chuild()
5	:nth-of-type()
6	:nth-last-of-type
7	:first-type()
8	:first-of-type
9	:last-of-type()
10	:only-child
11	:only-of-type
12	:empty
13	:root

“结构伪类选择器” 详细讲解地址: ‘整理中’

4. CSS 否定伪类选择器

序号	否定伪类选择器	示例	示例说明
1	:not()

“否定伪类选择器” 详细讲解地址: ‘整理中’

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题 就是 “前端CSS” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。

如果对你有所帮助，喜欢的可以点个关注, 必然回访; 文章会一直持续打磨 。

有什么想要了解的前端知识吗? 可以评论留言, 会及时跟进分享所提内容 。

整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 无论知识点是大是小, 都会验证后再分享, 以防自己发表的文章给大家造成误导 。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。