关于前端:重新整理了伪类伪元素

3次阅读

共计 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`	匹配一个表单元素的占位文本