css伪类制作

CSS伪类的基本概念

CSS伪类用于定义元素的特殊状态，例如鼠标悬停、焦点状态或特定位置的子元素。伪类以冒号（:）开头，紧随在元素选择器之后。

常用伪类及其用法

:hover 鼠标悬停在元素上时触发样式变化。常用于按钮或链接的交互效果。

a:hover {
  color: red;
  text-decoration: underline;
}

:active 元素被激活（如鼠标点击瞬间）时生效。

button:active {
  background-color: #555;
}

:focus 元素获得焦点时（如表单输入框被选中）应用样式。

input:focus {
  border: 2px solid blue;
  outline: none;
}

:nth-child() 选择特定位置的子元素。支持公式（如2n表示偶数位）或固定数值。

li:nth-child(odd) {
  background-color: #f2f2f2;
}

动态效果组合示例

通过组合伪类实现复杂交互。以下代码实现按钮悬停和点击的渐变效果：

.button {
  transition: background 0.3s;
  background: #3498db;
}
.button:hover {
  background: #2980b9;
}
.button:active {
  transform: translateY(1px);
}

表单验证相关伪类

:valid/:invalid 根据输入内容是否有效自动应用样式：

input:valid {
  border-color: green;
}
input:invalid {
  border-color: red;
}

注意事项

1. 伪类顺序需遵循LVHA规则（:link > :visited > :hover > :active）
2. 部分伪类（如:focus-within）需要现代浏览器支持
3. 结合伪元素（如::before）可创建更复杂的视觉效果