共计 1640 个字符，预计需要花费 5 分钟才能阅读完成。
介绍
伪类和伪元素是 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 | 匹配一个表单元素的占位文本 |
最初
具体怎么写这里就不一个一个列举了。网上一搜就有的。次要是有哪些伪类伪元素须要有个概念，不便我的项目中用到能想起来。
完结
好了，本文到此结束，心愿本文对你有所帮忙 :-)
最近新弄了一个公众号：写代码的浩，求关注 😄。前面会逐渐把把握的前端常识以及职场常识积淀下来。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。
正文完
