介绍
伪类和伪元素是css中基础概念，::before，::after这两个大家应该用的比较多了。今天把伪类和伪元素重新做了一个整理。
区别
首先，伪类和伪元素是两个东西，这个从名字也能看出来。那么它们的区别是什么呢？
准确来说伪类他是不是一个元素，它是属于某一个元素的某一个状态。比如:hover，:active，:first-child。
而伪元素它是更像一个Element，用于在dom中增加一个特殊的element节点，比如::after, ::before, ::first-line等。
伪类
| 伪类 | 描述 |
|---|---|
| :active | 在用户激活（例如点击）元素的时候匹配。 |
| :any-link | 匹配一个链接的:link和:visited状态。 |
| :autofill | 匹配<input>元素等表单元素是由autocomplete填充时的样式。 |
| :checked | 匹配处于选中状态的单选或者复选框。 |
| :default | 匹配一组相似的元素中默认的一个或者更多的 UI 元素。 |
| :disabled | 匹配处于关闭状态的用户界面元素 |
| :empty | 匹配除了可能存在的空格外，没有子元素的元素。 |
| :enabled | 匹配处于开启状态的用户界面元素。 |
| :first-child | 匹配兄弟元素中的第一个元素。 |
| :first-of-type | 匹配兄弟元素中第一个某种类型的元素。 |
| :focus | 当一个元素有焦点的时候匹配。 |
| :focus-visible | 当元素有焦点，且焦点对用户可见的时候匹配。 |
| :focus-within | 匹配有焦点的元素，以及子代元素有焦点的元素。 |
| :hover | 当用户悬浮到一个元素之上的时候匹配。 |
| :indeterminate | 匹配未定态值的 UI 元素，通常为复选框，单选框。 |
| :invalid | 匹配诸如<input>的任意内容未通过验证状态。 |
| :last-child | 匹配兄弟元素中最末的那个元素。 |
| :last-of-type | 匹配兄弟元素中最后一个某种类型的元素。 |
| :link | 匹配未曾访问的链接。 |
| :is() | 匹配传入的选择器列表中的任何选择器。 |
| :not | 匹配作为值传入自身的选择器未匹配的物件。 |
| :nth-child | 匹配兄弟元素中的元素(可以是非同类元素)<br/>兄弟元素按照an+b形式的式子进行匹配 |
| :nth-of-type | 匹配某种类型的一列兄弟元素。<br/>兄弟元素按照an+b形式的式子进行匹配 |
| :nth-last-child | 匹配一列兄弟元素(可以是非同类元素)，从后往前倒数。<br/>兄弟元素按照an+b形式的式子进行匹配 |
| :nth-last-of-type | 匹配某种类型的一列兄弟元素，从后往前倒数。 |
| :only-child | 匹配没有兄弟元素的元素。 |
| :only-of-type | 匹配兄弟元素中某类型仅有的元素。 |
| :optional | 匹配不是必填的 form 元素。 |
| :read-only | 匹配用户不可更改的元素。 |
| :read-write | 匹配用户可更改的元素。 |
| :required | 匹配必填的 form 元素。 |
| :valid | 匹配诸如<input>元素的处于可用状态的元素。 |
| :target | 匹配当前 URL 目标的元素（例如如果它有一个匹配当前URL 分段的元素）。 |
| :visited | 匹配已访问链接。 |
伪元素
| 伪元素 | 描述 |
|---|---|
| ::after | 匹配出现在原有元素的实际内容之后的一个可样式化元素。 |
| ::before | 匹配出现在原有元素的实际内容之前的一个可样式化元素。 |
| ::first-letter | 匹配元素的第一个字母。 |
| ::first-line | 匹配包含此伪元素的元素的第一行。 |
| ::selection | 匹配文档中被选择的那部分。 |
| ::placeholder | 匹配一个表单元素的占位文本 |
最后
具体怎么写这里就不一个一个罗列了。 网上一搜就有的。主要是有哪些伪类伪元素需要有个概念，方便项目中用到能想起来。
来自：https://segmentfault.com/a/1190000043428258
css伪选择器使用总结——css中关于伪类和伪元素的知识总汇
CSS 伪类用于向某些选择器添加特殊的效果，而CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。这里讲总结关于css伪类和伪元素的相关使用
如何使用JS操纵伪元素
获取伪元素的属性值可以使用window.getComputedStyle()方法，获取伪元素的CSS样式声明对象。然后利用getPropertyValue方法或直接使用键值访问都可以获取对应的属性值。 更换class来实现伪元素属性值的更改、使用CSSStyleSheet的insertRule来为伪元素修改样式、
css获取除第一个之外的子元素
有时候我们需要用CSS选择非第一个子元素，例如下面这样的HTML，希望让两个span之间间隔一定的距离，但又不希望简单的给每个span设置margin-right（会导致最后一个span也有margin-right，可能影响之后元素的排版）。
为什么是link-visited-hover-active
通常我们在设置链接的一些伪类（link，visited，hover，active）样式时，要让不同的状态显示正确的样式，我们需要按一定的顺序设置这些伪类的样式。这里我就按CSS2规范中推荐的顺序进行介绍，即 link-visited-hover-active
CSS3新增的伪类有哪些 与 居中div的多种方法
CSS3新增伪类有那些？p:first-of-type:选择属于其父元素的首个<p>元素,p:last-of-type:选择属于其父元素的最后<p>元素,p:only-of-type:属于父元素的特定类型的唯一子元素,p:only-child:属于父元素的唯一子元素的每个<p>元素;p:nth-child(2)
深入理解CSS伪类
伪类经常与伪元素混淆，伪元素的效果类似于通过添加一个实际的元素才能达到，而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。本文将详细介绍伪类的详细知识
css否定伪类:not(s)
:not(X)是CSS中的一个否定伪类（选择器），并且接受一个简单的选择器作为参数。本质上，可以使任一其他选择器（作为参数）。:not（选择器）匹配传递参数选择器未选择的元素。传递参数或许不包括增加的选择器或者伪元素选择器。
善用CSS伪类，不用JS也能做出选项卡功能
本篇文章的技术给予选项卡UI另一种开发的选择，Radio button的特性还有很多应用可以做（如Switcher），只要善用HTML表单元素与CSS的一些技巧，也能玩出很多有趣的功能，甚至替代JavaScript的部份工作.
html中a标签的4个伪类样式
在CSS超链接的属性中，有四个连接方式:a:link a:hover a:visited a:acticve，之前在使用的时候一直是按照自认为的顺序中去写的，就是 L H V A的排序方式，然而有些时候却发现并不起作用了
中间文字，两边横线的css3伪类的使用
CSS伪类是用来添加一些选择器的特殊效果。使用了css3的伪类，即相当于是在一个div中写入文字，然后在它前后各加了一个div，然后进行位置及宽高的调节。代码中只写一个div，然后在css样式中，对该div设置flex布局
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!