伪类 (Pseudo-class)
伪类的作用是为 DOM 树中已有的元素，根据其不同的状态或者在文档树中的位置关系，来应用不同的样式。它并没有创建新的元素。 基于用户行为的状态：
:hover：鼠标悬停在元素上时。 :active：元素被激活时（例如，鼠标按下时）。 :focus：元素获取焦点时（常见于 <input>、<button> 等表单元素）。 :visited / :link：链接被访问过或未被访问时的状态。 基于在 DOM 树中的位置和关系： :first-child：作为其父元素的第一个子元素。 :last-child：作为其父元素的最后一个子元素。 :nth-child(n)：作为其父元素的第 n 个子元素，功能非常强大。 :not(selector)：选择不匹配指定选择器的元素。
你可以这样理解：一个 <a> 标签，它本身就在那里。当你的鼠标放上去时，它就进入了 :hover 这个“状态”，但它依然是那个 <a> 标签。
- 伪元素 (Pseudo-element)
伪元素会在一个元素的内容之前或之后，或者针对其内容的特定部分，创建一个抽象的、不存在于 DOM 中的新元素，并允许你为这个新元素添加样式。 在元素内容前后插入新内容： ::before：在元素的内容（content）之前插入一个虚拟元素。 ::after：在元素的内容（content）之后插入一个虚拟元素。 这两个伪元素必须配合 content 属性使用，即使 content: ''; 也可以。它们最常见的用途是清除浮动、创建自定义图标或装饰性图形。 选中内容的特定部分： ::first-line：选中元素的第一行文本。 ::first-letter：选中元素的第一个字母。 ::selection：选中用户用鼠标高亮选中的部分。
你可以这样理解：你有一个 <p> 标签，::before 就像是在这个 <p> 标签的“内部前面”放了一个你看不见摸不着的 <span>，然后你可以给这个虚拟的 <span> 设置样式。
/[< \w >]/g