70+超全的伪类伪元素集合

伪类和伪元素的概念

1.什么是伪类？

伪类是一种选择器。 mozilla 是这样解释伪类的：

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时， 或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样， 帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。

伪类的语法：单冒号 + 伪类名称，例如下面这样

:first-child

:last-child

2.什么是伪元素？

伪元素和伪类相似，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上加入 class 类， 伪元素的表现和普通 HTML 元素类似，但他们又不以 html 标签的形式被编写，而是往往以 CSS 的方式编写。

伪元素的语法：双冒号 + 伪元素名称，例如下面这样：

::first-line

::before

注意事项

1.一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。

2.按照规范，应该使用双冒号（::）而不是单个冒号（:），以便区分伪类和伪元素。 但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都 同时支持使用这两种方式来表示伪元素。单冒号是 CSS2 的语法，双冒号是 CSS3 的语法。

伪元素单双冒号语法在各大浏览器的支持情况：

3.注意事项

伪类会给页面中已经存在的元素添加一个类（class），伪元素则是添加了一个页面中没有的元素， 但请注意这个被添加的元素不会添加到文档树中，只是一种视觉效果。

70+伪类伪元素集合

1.伪类伪元素汇总

tips：共统计到了 60 个伪类。

• :active
• :checked
• :default
• :defined
• :disabled
• :empty
• :enabled
• :first
• :first-child
• :first-of-type
• :focus
• :focus-within
• :host
• :host()
• :hover
• :indeterminate
• :in-range
• :invalid
• :lang()
• :last-child
• :last-of-type
• :left
• :link
• :not()
• :nth-child()
• :nth-last-of-type()
• :nth-of-type()
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :nth-last-child()
• :read-only
• :read-write
• :required
• :right
• :root
• :scope
• :target
• :valid
• :visited
• :where
• :any-link 实验性的功能
• :blank 实验性的功能
• :current 实验性的功能
• :dir() 实验性的功能
• :drop 实验性的功能
• :fullscreen 实验性的功能
• :future 实验性的功能
• :focus-visible 实验性的功能
• :has() 实验性的功能
• :host-context() 实验性的功能
• :is() 实验性的功能
• :local-link 实验性的功能
• :nth-col() 实验性的功能
• :nth-last-col() 实验性的功能
• :past 实验性的功能
• :placeholder-shown 实验性的功能
• :target-within 实验性的功能
• :user-invalid 实验性的功能

tips：共统计到了 12 个伪元素。

• ::after (:after)
• ::before (:before)
• ::cue (:cue)
• ::first-letter (:first-letter)
• ::first-line (:first-line)
• ::selection
• ::slotted()
• ::spelling-error
• ::grammar-error 实验性的功能
• ::marker 实验性的功能
• ::placeholder 实验性的功能
• ::backdrop 实验性的功能