揭秘 CSS4 中 4 组至关重要的伪类选择器

前端

2024-02-02 07:19:49

在 CSS 的进化历程中，伪类选择器的出现彻底改变了我们选择和操作页面元素的方式。随着 CSS4 的临近，4 组全新伪类选择器的加入势必将进一步扩展我们的 Web 开发工具箱。

尽管 CSS4 仍在开发中，但这些伪类选择器已在主流浏览器中得到部分支持。通过理解和掌握它们，Web 开发人员可以创建更强大、更灵活的样式表，实现更加复杂的页面设计。

第 1 组：状态伪类

:active ：当元素处于激活状态（例如，按钮被单击时）
:focus ：当元素获取焦点时（例如，输入字段获得焦点时）
:hover ：当光标悬停在元素上时
:visited ：当元素已被访问过（仅适用于链接元素）

第 2 组：结构伪类

:first-child ：选择父元素中的第一个子元素
:last-child ：选择父元素中的最后一个子元素
:nth-child(n) ：选择父元素中第 n 个子元素（例如，:nth-child(2)）
:nth-last-child(n) ：选择父元素中倒数第 n 个子元素

第 3 组：用户界面伪类

:checked ：当复选框或单选按钮被选中时
:disabled ：当元素被禁用时
:enabled ：当元素被启用时
:required ：当输入字段是必需填写时

第 4 组：其他伪类

:lang(lang-code) ：选择具有指定语言属性的元素
:not(selector) ：选择不匹配指定选择器的元素
:target ：选择文档中的目标元素
::before 和 ::after ：在元素之前或之后插入伪元素

实例

以下是一些使用 CSS4 伪类选择器的实例：

改变悬停时按钮的背景颜色：

button:hover {
  background-color: red;
}

禁用输入字段：

input[type="text"]:disabled {
  color: gray;
}

选择列表中的最后三个项目：

ul li:nth-last-child(-n+3) {
  font-weight: bold;
}

在段落之前插入一个虚线边框：

p::before {
  content: "";
  border-bottom: 1px dashed black;
  width: 100%;
}

结论

CSS4 中引入的 4 组伪类选择器为 Web 开发人员提供了更加强大的工具，用于选择和操作页面元素。通过理解和掌握这些选择器，我们可以创建更复杂、更灵活的样式表，提升我们的 Web 应用程序的视觉吸引力和功能性。随着 CSS4 的继续发展，我们有望看到更多的伪类选择器和功能的出现，进一步扩展 Web 开发的可能性。