本篇文章给大家带来的内容是关于CSS3中增加的伪类有哪些及其作用是什么？有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
1. 伪类与伪元素
CSS伪类：用于向某些选择器添加特殊的效果。
CSS伪元素：用于将特殊的效果添加到某些选择器。伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
| 伪元素 | 作用 |
| ::first-letter | 将样式添加到文本的首字母 |
| ::first-line | 将样式添加到文本的首行 |
| ::before | 在某元素之前插入某些内容 |
| ::after | 在某元素之后插入某些内容 |
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。
CSS3为了区分伪类和伪元素，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。
立即学习“前端免费学习笔记（深入）”；
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。伪元素由双冒号和伪元素名称组成。不过浏览器需要同时支持旧的已经存在的伪元素写法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
2、CSS3新增伪类
| 新增伪类 | 作用 |
| p:first-of-type | 选择属于其父元素的首个 元素的每个 元素。 
魔法映像企业网站管理系统
下载
技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作 |
| p:last-of-type | 选择属于其父元素的最后 元素的每个 元素。 |
| p:only-of-type | 选择属于其父元素唯一的 元素的每个 元素。 |
| p:only-child | 选择属于其父元素唯一的子元素的每个 元素。 |
| p:nth-child(n) | 选择属于其父元素的第n个子元素的每个 元素。 |
| p:nth-last-child(n) | 选择属于其父元素的倒数第n个子元素的每个 元素。 |
| p:nth-of-type(n) | 选择属于其父元素第n个 元素的每个 元素。 |
| p:nth-last-of-type(n) | 选择属于其父元素倒数第n个 元素的每个 元素。 |
| p:last-child | 选择属于其父元素最后一个子元素的每个 元素。 |
| p:empty | 选择没有子元素的每个 元素（包括文本节点）。 |
| p:target | 选择当前活动的 元素。 |
| :not(p) | 选择非 元素的每个元素。 |
| :enabled | 控制表单控件的可用状态。 |
| :disabled | 控制表单控件的禁用状态。 |
| :checked | 单选框或复选框被选中。 |
| 伪类 | 作用 |
| :hover | 将样式添加到鼠标悬浮的元素 |
| :active | 将样式添加到被激活的元素 |
| :focus | 将样式添加到获得焦点的元素 |
| :link | 将样式添加到未被访问过的链接 |
| :visited | 将样式添加到被访问过的链接 |
| :first-child | 将样式添加到元素的第一个子元素 |
| :lang | 定义指定的元素中使用的语言 |
相关推荐：
