伪类选择器用于选择元素的特定状态或位置，常用的伪类选择器包括：

  1. :hover

    • 描述：当用户将鼠标悬停在元素上时应用样式。

    • 案例：

      a:hover {
    color: red;
}

  2. :active

    • 描述：当元素被激活（如点击）时应用样式。

    • 案例：

      button:active {
    background-color: yellow;
}

  3. :focus

    • 描述：当元素获得焦点（如输入框被点击）时应用样式。

    • 案例：

      input:focus {
    border-color: blue;
}

  4. :first-child

    • 描述：选择父元素下的第一个子元素。

    • 案例：

      li:first-child {
    font-weight: bold;
}

  5. :last-child

    • 描述：选择父元素下的最后一个子元素。

    • 案例：

      li:last-child {
    color: green;
}

  6. :nth-child()

    • 描述：选择父元素下的第n个子元素。

    • 案例：

      li:nth-child(2) {
    background-color: lightgray;
}

  7. :nth-of-type()

    • 描述：选择父元素下特定类型的第n个子元素。

    • 案例：

      p:nth-of-type(3) {
    font-style: italic;
}

  8. :not()

    • 描述：选择不符合指定条件的元素。

    • 案例：

      p:not(.special) {
    color: black;
}

  9. :visited

    • 描述：选择已被访问过的链接。

    • 案例：

      a:visited {
    color: purple;
}

  10. :checked

    • 描述：选择被选中的表单元素（如复选框或单选按钮）。

    • 案例：

      input:checked {
    border: 2px solid green;
}

伪类选择器可以组合使用，以实现更复杂的选择逻辑。

本篇文章内容来源于：伪类选择器详细说明以及案例