本章讲解的内容为 CSS 伪类 。
废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。
一: 什么是 CSS 伪类？
1. CSS 伪类是用来添加一些 '选择器' 的特殊效果(特殊状态)。
2. 伪类实际使用场景举例:
1. 设置鼠标悬停在元素上时的样式 。
2. 为已访问和未访问链接设置不同的样式 。
3. 设置元素获得焦点时的样式 。
二: CSS 伪类选择器的分类 （4类）:
1. 动态伪类选择器。
2. UI元素状态伪类选择器。
3. 结构伪类选择器。
4. 否定伪类选择器。
三: 所有CSS伪类/元素- - -总览
序号选择器示例示例说明1:checkedinput:checked选择所有选中的表单元素2:disabledinput:disabled选择所有禁用的表单元素3:emptyp:empty选择所有没有子元素的p元素4:enabledinput:enabled选择所有启用的表单元素5:first-of-typep:first-of-type选择的每个 p 元素是其父元素的第一个 p 元素6:in-rangeinput:in-range选择元素指定范围内的值7:invalidinput:invalid选择所有无效的元素8:last-childp:last-child选择所有p元素的最后一个子元素9:last-of-typep: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-typep:only-of-type选择所有仅有一个子元素为p的元素16:only-childp:only-child选择所有仅有一个子元素的p元素17:optionalinput:optional选择没有"required"的元素属性18:out-of-rangeinput:out-of-range选择指定范围以外的值的元素属性19:read-onlyinput:read-only选择只读属性的元素属性20:read-writeinput:read-write选择没有只读属性的元素属性21:requiredinput:required选择有"required"属性指定的元素属性22:rootroot选择文档的根元素23:target#news:target选择当前活动#news元素(点击URL包含锚的名字)24:validinput:valid选择所有有效值的属性25:linka:link选择所有未访问链接26:visiteda:visited选择所有访问过的链接27:activea:active选择正在活动链接28:hovera:hover把鼠标放在链接上的状态29:focusinput:focus选择元素输入后具有焦点30:first-letterp:first-letter选择每个 元素的第一个字母
31:first-linep:first-line选择每个 元素的第一行
32:first-childp:first-child选择器匹配属于任意元素的第一个子元素的 元素
33:beforep:before在每个元素之前插入内容
34:afterp:after在每个元素之后插入内容
35:lang(language)p:lang(it)为元素的lang属性选择一个开始值
1. CSS anchor 锚(动态)伪类选择器:
序号anchor (锚)伪类示例示例说明1:linka:link未访问的链接2:visiteda:visited已访问的链接3:hovera:hover把鼠标放在链接上的状态 (鼠标划过链接)4:activea:active已选中的链接
“anchor (锚)伪类选择器” 详细讲解地址: ‘CSS伪类–锚伪类选择器(动态伪类选择器)-详细总结’ 。
图片示例总览:
2. CSS UI元素状态伪类选择器
序号UI元素状态伪类选择器示例示例说明1:focus2:checked3:selection4:enabled5:disabled6:read-write7:read-only8::before9::after
“UI元素状态伪类选择器” 详细讲解地址: ‘整理中’
3. CSS 结构伪类选择器
序号结构伪类选择器示例示例说明1:first-child2:last-child3:nth-child()4:nth-last-chuild()5:nth-of-type()6:nth-last-of-type7:first-type()8:first-of-type9:last-of-type()10:only-child11:only-of-type12:empty13:root
“结构伪类选择器” 详细讲解地址: ‘整理中’
4. CSS 否定伪类选择器
序号否定伪类选择器示例示例说明1:not()
“否定伪类选择器” 详细讲解地址: ‘整理中’
之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题 就是 “前端CSS” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。
如果对你有所帮助，喜欢的可以点个关注, 必然回访; 文章会一直持续打磨 。
有什么想要了解的前端知识吗? 可以评论留言, 会及时跟进分享所提内容 。
整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 无论知识点是大是小, 都会验证后再分享, 以防自己发表的文章给大家造成误导 。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。