挖掘CSS伪类选择器的精彩功能

前端

2023-10-18 23:47:11

CSS伪类选择器：打开元素状态驱动的造型王国

什么是CSS伪类选择器？

CSS伪类选择器是一组强大的工具，可根据元素的各种状态赋予它们独特的样式。通过利用这些选择器，前端开发人员可以创建高度交互且动态的网页，让用户与网站进行更有意义的互动。

了解最常见的CSS伪类选择器

:hover ：此选择器在鼠标悬停在元素上时指定样式，例如更改按钮的背景颜色或突出显示链接。

:visited ：:visited选择器用于为已访问的链接添加样式，例如更改其颜色或添加下划线。

:active ：当用户点击或激活元素时，:active选择器触发样式，例如淡出按钮或更改其颜色。

:nth-child() ：此选择器允许您根据元素在其父元素中的位置指定样式。例如，:nth-child(2)将样式应用于父元素的第二个子元素。

:first-child和:last-child ：这些选择器分别针对父元素的第一个和最后一个子元素设置样式。

:nth-of-type() ：与:nth-child()类似，:nth-of-type()选择器根据元素在其父元素中特定类型的子元素中的位置指定样式。

:first-of-type和:last-of-type ：这些选择器分别针对父元素中特定类型的第一个和最后一个子元素设置样式。

:checked ：:checked选择器为被选中的表单元素（如复选框和单选按钮）添加样式。

:enabled和:disabled ：这些选择器可用于禁用或启用表单元素，并根据其状态更改其外观。

:not() ：:not()选择器允许您排除某些元素，从而仅对不满足指定条件的元素应用样式。

代码示例：

/* 当鼠标悬停在按钮上时更改其背景颜色 */
button:hover {
  background-color: #007bff;
}

/* 为已访问的链接添加下划线 */
a:visited {
  text-decoration: underline;
}

/* 当按钮被点击时淡出按钮 */
button:active {
  opacity: 0.5;
}

/* 仅为父元素的第二个子元素添加边框 */
.parent > *:nth-child(2) {
  border: 1px solid #000;
}