重新整理了伪类伪元素

介绍

伪类和伪元素是CSS中基础概念，::before，::after这两个大家应该用的比较多了。今天把伪类和伪元素重新做了一个整理。

区别

首先，伪类和伪元素是两个东西，这个从名字也能看出来。那么它们的区别是什么呢？
准确来说伪类他是不是一个元素，它是属于某一个元素的某一个状态。比如:hover，:active，:first-child。
而伪元素它是更像一个Element，用于在DOM中增加一个特殊的element节点，比如::after, ::before, ::first-line等。

伪类

伪类	描述
:active	在用户激活（例如点击）元素的时候匹配。
:any-link	匹配一个链接的:link和:visited状态。
:autofill	匹配元素等表单元素是由autocomplete填充时的样式。
:checked	匹配处于选中状态的单选或者复选框。
:default	匹配一组相似的元素中默认的一个或者更多的 UI 元素。
:disabled	匹配处于关闭状态的用户界面元素
:empty	匹配除了可能存在的空格外，没有子元素的元素。
:enabled	匹配处于开启状态的用户界面元素。
:first-child	匹配兄弟元素中的第一个元素。
:first-of-type	匹配兄弟元素中第一个某种类型的元素。
:focus	当一个元素有焦点的时候匹配。
:focus-visible	当元素有焦点，且焦点对用户可见的时候匹配。
:focus-within	匹配有焦点的元素，以及子代元素有焦点的元素。
:hover	当用户悬浮到一个元素之上的时候匹配。
:indeterminate	匹配未定态值的 UI 元素，通常为复选框，单选框。
:invalid	匹配诸如的任意内容未通过验证状态。
:last-child	匹配兄弟元素中最末的那个元素。
:last-of-type	匹配兄弟元素中最后一个某种类型的元素。
:link	匹配未曾访问的链接。
:is()	匹配传入的选择器列表中的任何选择器。
:not	匹配作为值传入自身的选择器未匹配的物件。
:nth-child	匹配兄弟元素中的元素(可以是非同类元素) 兄弟元素按照an+b形式的式子进行匹配
:nth-of-type	匹配某种类型的一列兄弟元素。 兄弟元素按照an+b形式的式子进行匹配
:nth-last-child	匹配一列兄弟元素(可以是非同类元素)，从后往前倒数。 兄弟元素按照an+b形式的式子进行匹配
:nth-last-of-type	匹配某种类型的一列兄弟元素，从后往前倒数。
:only-child	匹配没有兄弟元素的元素。
:only-of-type	匹配兄弟元素中某类型仅有的元素。
:optional	匹配不是必填的 form 元素。
:read-only	匹配用户不可更改的元素。
:read-write	匹配用户可更改的元素。
:required	匹配必填的 form 元素。
:valid	匹配诸如元素的处于可用状态的元素。
:target	匹配当前 URL 目标的元素（例如如果它有一个匹配当前URL 分段的元素）。
:visited	匹配已访问链接。

伪元素

伪元素	描述
::after	匹配出现在原有元素的实际内容之后的一个可样式化元素。
::before	匹配出现在原有元素的实际内容之前的一个可样式化元素。
::first-letter	匹配元素的第一个字母。
::first-line	匹配包含此伪元素的元素的第一行。
::selection	匹配文档中被选择的那部分。
::placeholder	匹配一个表单元素的占位文本

最后

具体怎么写这里就不一个一个罗列了。 网上一搜就有的。主要是有哪些伪类伪元素需要有个概念，方便项目中用到能想起来。

结束

好了，本文到此结束，希望本文对你有所帮助 :-)
最近新弄了一个公众号：写代码的浩，求关注 。后面会逐步把掌握的前端知识以及职场知识沉淀下来。
如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。