CSS 伪类

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

伪类就是开头为冒号的关键字。例如，:hover 就是一个伪类。

基本用法

如果我们想要让一篇文章中的第一段变大加粗，像下面这样：

我们可为此段加上一个类，然后为那个类添加 CSS：

<article>
  <p class="first">
    蔬菜对你有好处，所以你需要多吃大头菜、大葱、白萝卜、苋菜、番茄酱、甜瓜、红豆、大蒜。
  </p>

  <p>
    秋葵浓汤、甜菜叶、玉米、鸡冠菜、菊苣、秋葵浓汤、葫芦。欧芹、葱、西葫芦、塌棵菜、豌豆芽、蚕豆、羽衣甘蓝、蒲公英、秋葵、裙带菜、番茄。蒲公英、黄瓜、花生、豌豆、花生、鸡冠菜、西葫芦。
  </p>
</article>

.first {
  font-size: 120%;
  font-weight: bold;
}

不过，这在维护的时候可能会很麻烦。

问题来自几个方面：

• 要是文档的头部又加上一段的话呢？毕竟页面内容可能是变化的，这时需要把这个类挪到新加的这段上。
• 编辑 HTML 并不总是可行，也许是因为它是由一个 CMS 生成的，即我们根本拿不到内容，也无法为此加上类名。

这里，我们就可以使用:first-child伪类选择器，这将一直选中文章中的第一个子元素，我们将不再需要编辑 HTML。

所有的伪类以同样的方式实现。它们选中你的文档中处于某种状态的那部分，表现得就像是你已经向你的 HTML 加入类一样。

速查手册

好的，已按照你的要求将所有表格调整为三列：名称、作用（简述能干什么）、注意事项（只列举容易弄错、混淆或踩坑的地方）。

位置与结构（基于 DOM 层级）

通过元素在父容器中的位置编号或唯一性进行匹配。

用户动作与交互（基于行为状态）

响应用户的鼠标、触摸或键盘操作。

表单与 UI 状态（基于控件属性）

针对表单控件的值状态、可用性和选中情况。

逻辑组合与关系（筛选与简化）

用于组合条件、排除元素或逆向查找父级。

链接、锚点与语言环境（外部资源匹配）

与 URL 跳转记录、页面锚点及国际化语言设置相关。

根节点与分页（文档顶层与打印）

作用于整个文档根元素或打印分页场景。