CSS的伪类

小蓝 • 2024-12-12 12:20 • 编程

CSS的伪类是指用于向选择器添加特殊效果的关键字。伪类可以添加到选择器的末尾，以添加对被选择元素的特殊效果。伪类可以帮助我们轻松地更改HTML元素的样式，而不需要去修改HTML本身。本文将从不同角度，介绍CSS的几个常用伪类。

一、:hover 伪类

:hover伪类用于在鼠标悬停在元素上时，更改元素的样式。这是一个非常常用的伪类，可以通过它将任何元素的颜色，背景色，边框等更改为想要的效果，增加网站的交互性和美观度。

实现一

a:hover {
    color: red;
}

如上代码所示，当鼠标悬停在链接上时，文字颜色将变为红色。

实现二

.button:hover {
    background-color: #000;
    color: #fff;
}

如上代码所示，当鼠标悬停在按钮上时，按钮的背景颜色会更改为黑色，文字颜色更改为白色。

二、:nth-child 伪类

:nth-child伪类允许我们选取元素的某个特定子元素。这可以用于选择列表的特定项，或包含多个元素的容器中的特定项。

实现一

ul li:nth-child(2) {
    color: blue;
}

如上代码所示，将选取ul元素下第二个li元素，并将其文字颜色改为蓝色。

实现二

div:nth-child(odd) {
    background-color: #ccc;
}

如上代码所示，将选取奇数编号的div元素，并将它们的背景颜色更改为灰色。

三、:checked 伪类

:checked伪类用于选择已选中的表单元素，例如checkbox和radio。

实现一

input[type="checkbox"]:checked + label {
    text-decoration: line-through;
}

如上代码所示，将选取已选中的checkbox元素，并将它后面的label标签的文本加上删除线。

实现二

input[type="radio"]:checked + label {
    background-color: #000;
    color: #fff;
}

如上代码所示，将选取已选中的radio元素，并将它后面的label标签的背景颜色更改为黑色，文字颜色更改为白色。

四、:not 伪类

:not伪类用于选择不匹配指定选择器的元素。

实现一

button:not([disabled]) {
    background-color: #fff;
    color: #000;
}

如上代码所示，将选取所有未禁用的button元素，并将它们的背景颜色更改为白色，文字颜色更改为黑色。

实现二

li:not(:last-child) {
    border-bottom: 1px solid #ccc;
}

如上代码所示，将选取除了最后一个li元素外的所有li元素，并将它们的下边框样式更改为一像素的灰色实线。

五、:focus 伪类

:focus伪类用于选择当前接收键盘输入焦点的元素。

实现一

input:focus {
    border: 1px solid blue;
}

如上代码所示，将选取处于焦点状态的input元素，并将它边框加上蓝色的外框线。

实现二

textarea:focus {
    border: 2px solid green;
    outline: none;
}

如上代码所示，将选取处于焦点状态的textarea元素，并将它边框加上二像素的绿色实线，同时去掉默认的外部边框线。

结语

以上就是CSS的5个常用伪类的详细介绍与示例。使用伪类能够让我们更好地控制和美化网页元素，提高用户体验和视觉效果。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/240176.html