一、: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个常用伪类的详细介绍与示例。使用伪类能够让我们更好地控制和美化网页元素,提高用户体验和视觉效果。