css伪类制作
理解CSS伪类
CSS伪类（Pseudo-classes）是用于定义元素的特殊状态的关键词，它们允许根据用户交互或文档结构动态地选择元素。常见的伪类包括 :hover、:active、:focus、:nth-child() 等。
基本语法
伪类通常附加到选择器末尾，格式为 selector:pseudo-class。例如：
a:hover {
color: red;
}这段代码会在鼠标悬停时将链接文字颜色变为红色。
常用伪类示例
链接相关伪类
a:link { color: blue; } /* 未访问链接 */
a:visited { color: purple; } /* 已访问链接 */
a:hover { color: red; } /* 鼠标悬停 */
a:active { color: yellow; } /* 点击瞬间 */用户交互伪类
button:focus {
outline: 2px solid orange;
}
input:disabled {
opacity: 0.5;
}结构伪类
li:first-child { font-weight: bold; }
li:nth-child(odd) { background: #eee; }
div:empty { display: none; }组合使用伪类
多个伪类可以串联使用：
button:hover:active {
transform: scale(0.95);
}表单相关伪类
input:checked + label {
color: green;
}
input:invalid {
border-color: red;
}注意事项
- 伪类顺序很重要，推荐按 LVHA 顺序（:link, :visited, :hover, :active）
- 某些伪类如 :focus-within 有兼容性要求
- 伪类选择器优先级与类选择器相同
高级伪类示例
选择特定位置的元素
/* 选择每行第三个元素 */
:nth-child(3n) {
margin-right: 0;
}否定伪类
div:not(.special) {
opacity: 0.8;
}通过合理运用伪类，可以创建丰富的交互效果而无需JavaScript，提升用户体验。
