常用的CSS伪类选择器

原创已于 2024-11-07 17:09:09 修改 · 950 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html #css3 #html5 #开发语言 #vscode

于 2024-11-07 17:02:32 首次发布

常用的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：用户选择的文本。