CSS 伪类：nth-child、not、first-child 与 focus

伪类是什么

伪类是冒号后面的一个关键字，它按元素在文档中的位置或元素的状态来选择元素。你把它附加在普通选择器后面：li:first-child、input:focus、a:hover。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pseudo-classes</title>
  <style>
    li { padding: 6px 10px; list-style: none; }
    li:nth-child(odd) { background: #e5e7eb; }       /* zebra stripes */
    li:first-child { font-weight: bold; }
    li:last-child { color: #2563eb; }
    li:not(.done) { border-inline-start: 4px solid #f59e0b; }
  </style>
</head>
<body>
  <ul>
    <li>First child: bold</li>
    <li class="done">Done: no amber edge</li>
    <li>Odd rows are gray</li>
    <li class="done">Done</li>
    <li>Last child: blue</li>
  </ul>
</body>
</html>

链接和鼠标相关的状态伪类（:hover、:active、:visited）有专门的页面：CSS hover。

:nth-child() 与 an+b 公式

:nth-child() 接受一个数字、一个关键字或一个 an+b 公式。浏览器会依次代入 n = 0、1、2……，匹配公式得出的每一个位置（位置从 1 开始）。

输入一个公式，看看哪些项被匹配：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-child tester</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(6, 40px); gap: 6px; padding: 0; }
    .grid li {
      list-style: none;
      height: 40px;
      display: grid;
      place-items: center;
      background: #e5e7eb;
      border-radius: 6px;
    }
  </style>
  <style id="live"></style>
</head>
<body>
  <label>li:nth-child( <input id="f" value="3n+1" size="8"> )</label>
  <ul class="grid" id="grid"></ul>
  <script>
    const grid = document.getElementById('grid');
    for (let i = 1; i <= 18; i++) grid.innerHTML += '<li>' + i + '</li>';
    const input = document.getElementById('f');
    const update = () => {
      document.getElementById('live').textContent =
        '.grid li:nth-child(' + input.value + ') { background: #2563eb; color: white; }';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

试试 odd、even、4、n+7、-n+5 和 2n+3。无效的公式什么都不匹配。

从末尾开始计数的版本是 :nth-last-child()：li:nth-last-child(-n+2) 选择最后两项。

nth-child 与 nth-of-type 的区别

:nth-child() 统计所有兄弟元素，不管它们是什么标签，然后才检查选择器的其余部分。:nth-of-type() 只统计相同标签的兄弟元素。一旦兄弟元素混在一起，区别就显现出来了：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-of-type</title>
  <style>
    p, h2 { margin: 4px 0; padding: 4px 8px; }
    p:nth-child(2) { background: #f59e0b; }   /* 2nd child AND a p */
    p:nth-of-type(2) { color: #2563eb; font-weight: bold; } /* 2nd p */
  </style>
</head>
<body>
  <h2>Heading (child 1)</h2>
  <p>Paragraph 1, child 2: amber</p>
  <p>Paragraph 2, child 3: blue and bold</p>
  <p>Paragraph 3, child 4</p>
</body>
</html>

两端也有同样成对的伪类：:first-child / :first-of-type、:last-child / :last-of-type、:only-child / :only-of-type。

:not()、:is() 与 :where()

:not() 是日常最常用的一个，例如在各项之间加分隔线，但最后一项后面不加：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>not</title>
  <style>
    .tags { padding: 0; }
    .tags li { display: inline; list-style: none; }
    .tags li:not(:last-child)::after { content: " · "; color: #2563eb; }
    input:not([type="checkbox"]) { border: 2px solid #16a34a; }
  </style>
</head>
<body>
  <ul class="tags"><li>html</li><li>css</li><li>js</li></ul>
  <input type="text" placeholder="Text: green border">
  <input type="checkbox" aria-label="Checkbox, default border">
</body>
</html>

状态伪类：focus、checked、disabled、invalid

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>States</title>
  <style>
    input { padding: 6px; border: 2px solid #e5e7eb; border-radius: 6px; outline: none; }
    input:focus-visible { border-color: #2563eb; }
    input:user-invalid { border-color: #f59e0b; }
    .field:focus-within label { color: #2563eb; }
    input:checked + label { text-decoration: line-through; color: #16a34a; }
    button:disabled { opacity: 0.4; }
  </style>
</head>
<body>
  <p class="field">
    <label for="mail">Email</label>
    <input id="mail" type="email" required placeholder="you@example.com">
  </p>
  <p>
    <input type="checkbox" id="task" checked>
    <label for="task">Checked task</label>
  </p>
  <button disabled>Disabled button</button>
</body>
</html>

点击邮箱输入框：通过 :focus-within，它的标签会变成蓝色。输入一个不是邮箱的内容，然后离开输入框：:user-invalid 会让边框变成琥珀色。如果用普通的 :invalid，这个必填的空输入框在你碰它之前就已经被标成琥珀色了。

无论你怎样处理 :focus，都要保留可见的焦点样式。去掉轮廓线却不提供替代样式，使用键盘的用户就看不出自己当前在哪里。

:has()，父元素选择器

:has() 根据元素包含的内容来匹配它。它就是大家期待已久的“父元素选择器”，在当前的 Chrome、Firefox 和 Safari 中都能使用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>has</title>
  <style>
    .option { display: block; border: 2px solid #e5e7eb; padding: 8px; margin: 6px 0; border-radius: 6px; }
    .option:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <label class="option"><input type="radio" name="plan" checked> Monthly</label>
  <label class="option"><input type="radio" name="plan"> Yearly</label>
</body>
</html>

选择另一个套餐：整张卡片会跟随单选按钮变化，完全不需要 JavaScript。

常见错误

• 冒号前面多了空格。 li :first-child 的意思是“li 内部的第一个子元素”。应写成 li:first-child。
• 以为 p:nth-child(1) 表示“第一个 p”。 它的意思是“第一个子元素，如果它是 p 的话”。要选第一个 p，请用 :first-of-type。
• 从 0 开始计数。 位置从 1 开始：:nth-child(0) 什么都匹配不到。
• 去掉焦点轮廓线。 写 :focus { outline: none } 却不提供替代样式，会破坏键盘导航。
• 混淆 : 和 ::。 :before 是伪元素 ::before 的旧写法；伪类始终只用一个冒号。