本章讲解的内容为 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” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。
如果对你有所帮助，喜欢的可以点个关注, 必然回访; 文章会一直持续打磨 。
有什么想要了解的前端知识吗? 可以评论留言, 会及时跟进分享所提内容 。
整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 无论知识点是大是小, 都会验证后再分享, 以防自己发表的文章给大家造成误导 。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/222043.html原文链接：https://javaforall.net
