html 5 的CSS3新增的伪类选择器还包括哪些？

Posted 2023-04-18

参考技术A :first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。
:last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。
:root :root 选择文档的根元素。
:empty p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。
:target #news:target 选择当前活动的 #news 元素。
:enabled input:enabled 选择每个启用的 <input> 元素。
:disabled input:disabled 选择每个禁用的 <input> 元素
:checked input:checked 选择每个被选中的 <input> 元素。
:not(selector) :not(p) 选择非 <p> 元素的每个元素。
::selection ::selection 选择被用户选取的元素部分。 参考技术B

:last-child    p:last-child    选择属于其父元素最后一个子元素每个 <p> 元素。 

:root    :root    选择文档的根元素。   

:empty    p:empty    选择没有子元素的每个 <p> 元素（包括文本节点）。

:target    #news:target    选择当前活动的 #news 元素。

:enabled    input:enabled    选择每个启用的 <input> 元素。  

:disabled    input:disabled    选择每个禁用的 <input> 元素。 

:checked    input:checked    选择每个被选中的 <input> 元素。  

:not(selector)    :not(p)    选择非 <p> 元素的每个元素。

::selection    ::selection    选择被用户选取的元素部分

参考技术C

:first-of-type    p:first-of-type    选择属于其父元素的首个 <p> 元素的每个 <p> 元素。    
:last-of-type    p:last-of-type    选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:only-of-type    p:only-of-type    选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-child    p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
:nth-child(n)    p:nth-child(2)    选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n)    p:nth-last-child(2)    同上，从最后一个子元素开始计数。
:nth-of-type(n)    p:nth-of-type(2)    选择属于其父元素第二个 <p> 元素的每个 <p> 元素。  
:nth-last-of-type(n)    p:nth-last-of-type(2)    同上，但是从最后一个子元素开始计数。    
:last-child    p:last-child    选择属于其父元素最后一个子元素每个 <p> 元素。 
:root    :root    选择文档的根元素。  
:empty    p:empty    选择没有子元素的每个 <p> 元素（包括文本节点）。 
:target    #news:target    选择当前活动的 #news 元素。
:enabled    input:enabled    选择每个启用的 <input> 元素。 
:disabled    input:disabled    选择每个禁用的 <input> 元素 
:checked    input:checked    选择每个被选中的 <input> 元素。 
:not(selector)    :not(p)    选择非 <p> 元素的每个元素。
::selection    ::selection    选择被用户选取的元素部分。

CSS3新增选择器 

css3选择器是在css2.0的基础上的修改创新。他增加了一些UI元素状态伪类选择器、结构伪类选择器、属性选择器等。Css3新增的这些选择器很多强大，他的出现给我们前端带来了好多便利。
一、使我们的网页代码更简洁、结构更加清晰，结构清晰就会有利于SEO（搜索引擎）的优化，代码简洁说明代码会少，代码少文件就会小，占用的网络带宽就会少，那么网页的加载速度就会快，用户体验度就会更好。例如：:first-child是用来选择某个元素的第一个子元素，比如你想让列表中的"1"具有与众不同的样式，我们就可以使用:first-child来实现：
li:first-child background: #ff0;
在没有这个选择器出现之前，我们都需在要第一个li上加上一个不同的class名，比如说“first”，然后在给他应用不同的样式
li.first background: #ff0;
其实这两种最终效果是一样的，只是后面这种，我们需要在html增加一个额外的class名，前一种就不需要

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

本章讲解的内容为 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” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。

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

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

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