常用的CSS伪类选择器

常用的CSS伪类选择器：

        一些经常用到的伪类,很容易遗忘所以放到这里.

1. 链接伪类：

   :link：未访问的链接。
   :visited：已访问的链接。

2. 用户动作伪类：

   :hover：鼠标悬停在元素上时。
   :active：元素被激活（如点击）时。

3. 结构伪类：

   :first-child：元素的第一个子元素。
   :last-child：元素的最后一个子元素。
   :nth-child()：元素的第n个子元素。
   :nth-last-child()：从后往前数元素的第n个子元素。
   :first-of-type：同类型兄弟元素中的第一个。
   :last-of-type：同类型兄弟元素中的最后一个。
   :nth-of-type()：同类型兄弟元素中的第n个。
   :nth-last-of-type()：从后往前数同类型兄弟元素中的第n个。
   :only-child：没有其他兄弟元素的元素。
   :only-of-type：没有其他同类型兄弟元素的元素。
   :empty：没有子元素的元素。

4. 表单伪类：

   :enabled：表单控件可用。
   :disabled：表单控件不可用。
   :checked：被选中的表单控件（如单选按钮或复选框）。

/* 选择所有被选中的单选按钮，并设置它们的边框颜色为绿色 */
input[type="radio"]:checked {
  border-color: green;
}

​
/* 选择所有被选中的复选框，并设置它们的背景色为蓝色 */
.custom-checkbox:checked {
  background-color: blue;
  border-color: blue;
}
/*custom-checkbox是复选框的类名*/

​

5. 目标伪类：

   :target：当前活动的#锚点。

6. 否定伪类：

   :not()：选择不匹配指定选择器的元素。

            /* 使用:not()选择器选择所有不是.highlight类的段落，并设置字体颜色为蓝色 */
            p:not(.highlight) {
                color: blue;
            }

7. 语言伪类：

   :lang()：根据元素的语言选择元素。

8. 输入伪类：

   :valid：输入字段的值有效。
   :invalid：输入字段的值无效。
   :in-range：输入字段的值在指定范围内。
   :out-of-range`：输入字段的值不在指定范围内。
   :required：标记为必填的输入字段。
   :optional：没有标记为必填的输入字段。

9. 其他伪类：

   :root：文档的根元素。
   ::before 和 ::after：用于在元素内容前后插入内容。
   ::first-letter：元素的第一个字母。
   ::first-line：元素的第一行。
   ::selection：用户选择的文本。