CSS 伪类详解：状态与结构选择器

link visited hover active

link: 选中所有尚未访问的链接
visited: 表示用户已访问过的链接,此伪类应用的样式有限
hover: 用户使用指示设备虚指一个元素
active: 匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。

tip

为了可以正确地渲染链接元素的样式，:link 伪类选择器应当放在其他伪类选择器的前面，并且遵循 LVHA 的先后顺序，即：:link — :visited — :hover — :active。

::: demo [vanilla]

<html>
  <ul>
    <li><a href="?" class="external" style="color: white">外部链接</a></li>
  </ul>
</html>
<style>
  /*谷歌浏览器暂时无法还原link效果，原因未知*/
  .external:link {
    background: yellow;
  }

  .external:visited {
    background: lightblue;
  }

  .external:hover {
    background: lightcoral;
  }

  .external:active {
    background: lightseagreen;
  }
</style>

{
  "show": true
}

:::

first/last/nth-child

:first-child：表示在一组兄弟元素中的第一个元素。最初定义时，所选元素必须有一个 parent。而从选择器 Level 4 开始，parent 不再是必须的。经测试，谷歌浏览器需要其有父元素
:last-child：代表父元素的最后一个子元素。
:nth-child：找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序，选择的结果为 CSS 伪类 :nth-child 括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）
- tr:nth-child(2n+1)：表示 HTML 表格中的奇数行。
- tr:nth-child(odd)：表示 HTML 表格中的奇数行。
- tr:nth-child(2n)：表示 HTML 表格中的偶数行。
- tr:nth-child(even)：表示 HTML 表格中的偶数行。
- span:nth-child(0n+1)：表示子元素中第一个且为 span 的元素，与 :first-child 选择器作用相同。
- span:nth-child(1)：表示父元素中子元素为第一的并且名字为 span 的标签被选中
- span:nth-child(-n+3)：匹配前三个子元素中的 span 元素。
:nth-last-child 与 :nth-child 效果相反，从兄弟节点中从后往前匹配处于某些位置的元素

示例

::: demo [vanilla]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <style>
      #test-child span:first-child {
        color: red;
      }

      #test-child span:last-child {
        color: blue;
      }

      #test-child span:nth-child(odd) {
        background: lightcyan;
      }

      #test-child span:nth-child(even) {
        background: lightpink;
      }

      #test-child span:nth-child(0n + 3) {
        background: red;
      }

      #test-child span:nth-child(2n + 3) {
        background: lightseagreen;
      }

      #test-child span:nth-child(-n + 2) {
        font-size: 20px;
      }

      #test-child span:nth-last-child(-n + 2) {
        font-size: 30px;
      }

      #test-child:first-child {
        background: red;
      }
    </style>
    <p id="test-child">
      <span>第一个测试元素</span>
      <span>第二个测试元素</span>
      <span>第三个测试元素</span>
      <span>第四个测试元素</span>
      <span>第五个测试元素</span>
      <span>第六个测试元素</span>
      <span>第七个测试元素</span>
      <span>第八个测试元素</span>
    </p>
    <p>1</p>
  </body>
</html>

{
  "show": true
}

:::

only-child

匹配没有任何兄弟元素的元素.
等效的选择器还可以写成 :first-child:last-child 或者 :nth-child(1):nth-last-child(1) ::: demo [vanilla]

<html>
  <ol id="onlyChild">
    <li>
      First
      <ul>
        <li>This list has just one element.</li>
      </ul>
    </li>
    <li>
      Second
      <ul>
        <li class="li-test1">
          This list has three elements.
          <span style="display: block;width: 50px">1</span>
        </li>
        <li class="li-test2">This list has three elements.</li>
        <li class="li-test3">This list has three elements.</li>
      </ul>
    </li>
  </ol>
  <style>
    #onlyChild li li {
      list-style-type: disc;
    }

    #onlyChild li:only-child {
      color: red;
      list-style-type: square;
    }

    .li-test1 :only-child {
      background: red;
    }
  </style>
</html>

{
  "show": true
}

:::

checked

作用于下列元素被选中时的样式

radio(<input type="radio">)
checkbox (<input type="checkbox">)
select 元素中的 option HTML 元素 ::: demo [vanilla]

<html>
  <div id="checked">
    <input type="radio" name="my-input" id="yes" />
    <input type="checkbox" name="my-checkbox" id="opt-in" />

    <select name="my-select" id="fruit">
      <option value="opt1">Apples</option>
    </select>
  </div>

  <style>
    #checked input:checked + label {
      color: red;
    }

    #checked input[type='radio']:checked {
      box-shadow: 0 0 0 3px orange;
    }

    #checked input[type='checkbox']:checked {
      box-shadow: 0 0 0 3px hotpink;
    }

    #checked option:checked {
      box-shadow: 0 0 0 3px lime;
      color: red;
    }
  </style>
</html>

{
  "show": true
}

:::