CSS 伪类完全指南引言CSS 伪类是选择特定状态元素的强大工具。本文将深入探讨各种伪类的用法和高级技巧。基础概念回顾伪类类型状态伪类::hover,:active,:focus,:visited结构伪类::first-child,:last-child,:nth-child,:empty表单伪类::checked,:disabled,:required,:valid否定伪类::not()伪类语法selector:pseudo-class { property: value; }高级技巧一状态伪类悬停效果.button { padding: 12px 24px; background: #667eea; color: white; border: none; border-radius: 8px; transition: all 0.3s ease; } .button:hover { background: #5a6fd6; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); } .button:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3); }焦点样式input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); } textarea:focus { outline: none; border-color: #667eea; }链接状态a:link { color: #667eea; } a:visited { color: #764ba2; } a:hover { color: #5a6fd6; text-decoration: underline; } a:active { color: #4d5fd0; }高级技巧二结构伪类第一个和最后一个子元素li:first-child { border-top: 2px solid #667eea; } li:last-child { border-bottom: 2px solid #667eea; }第 n 个子元素li:nth-child(odd) { background: #f8f9fa; } li:nth-child(even) { background: #ffffff; } li:nth-child(3) { font-weight: bold; } li:nth-child(3n) { color: #667eea; }空元素p:empty { height: 40px; background: #f8f9fa; border: 2px dashed #ddd; border-radius: 8px; }唯一子元素p:only-child { font-style: italic; color: #666; }高级技巧三表单伪类表单状态input:disabled { opacity: 0.5; cursor: not-allowed; } input:checked { accent-color: #667eea; } input:required { border-color: #f59e0b; } input:optional { border-color: #ddd; }表单验证input:valid { border-color: #10b981; } input:invalid { border-color: #ef4444; } input:in-range { border-color: #10b981; } input:out-of-range { border-color: #ef4444; }高级技巧四否定伪类排除特定元素li:not(.special) { opacity: 0.5; } input:not([typesubmit]) { width: 100%; } button:not(:disabled) { cursor: pointer; }组合否定input:not(:disabled):not(:read-only) { background: white; }高级技巧五目标伪类锚点定位:target { background: #fff3cd; border-left: 4px solid #f59e0b; padding-left: 16px; }平滑滚动html { scroll-behavior: smooth; } section:target { animation: highlight 1s ease; } keyframes highlight { from { background: #fff3cd; } to { background: transparent; } }实战案例卡片悬停效果.card { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .card:hover .card-icon { transform: scale(1.1) rotate(5deg); } .card-icon { font-size: 48px; color: #667eea; transition: all 0.3s ease; } .card-title { font-size: 18px; font-weight: 600; margin: 16px 0 8px; } .card-description { font-size: 14px; color: #666; line-height: 1.6; }实战案例导航栏样式.navbar { display: flex; gap: 24px; padding: 16px 24px; background: white; } .navbar-link { position: relative; padding: 8px 16px; text-decoration: none; color: #333; font-weight: 500; transition: color 0.3s ease; } .navbar-link:hover { color: #667eea; } .navbar-link::after { content: ; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) scaleX(0); width: 80%; height: 2px; background: #667eea; transition: transform 0.3s ease; } .navbar-link:hover::after { transform: translateX(-50%) scaleX(1); } .navbar-link.active { color: #667eea; } .navbar-link.active::after { transform: translateX(-50%) scaleX(1); }实战案例表单样式.form { max-width: 500px; margin: 0 auto; padding: 24px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 500; } .form-group input, .form-group textarea { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px; transition: all 0.3s ease; } .form-group input:focus, .form-group textarea:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } .form-group input:invalid:not(:placeholder-shown) { border-color: #ef4444; } .form-group input:valid:not(:placeholder-shown) { border-color: #10b981; } .form-group input:disabled { opacity: 0.5; cursor: not-allowed; } .submit-btn { width: 100%; padding: 14px; background: #667eea; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .submit-btn:hover:not(:disabled) { background: #5a6fd6; } .submit-btn:disabled { background: #ccc; cursor: not-allowed; }常见问题与解决方案Q1伪类顺序错误A遵循 LVHFA 顺序a:link { color: blue; } a:visited { color: purple; } a:hover { color: green; } a:focus { color: green; } a:active { color: red; }Q2nth-child 不生效A确保选择器正确li:nth-child(2) { /* 正确 */ } ul:nth-child(2) { /* 选择第2个ul元素 */ }Q3focus 样式不显示A移除 outline 后添加自定义样式input:focus { outline: none; border-color: #667eea; }最佳实践1. 使用过渡动画.button { transition: all 0.3s ease; } .button:hover { transform: scale(1.05); }2. 组合伪类input:not(:disabled):focus { border-color: #667eea; }3. 使用语义化标签button:active { /* 比 .btn:active 更好 */ }总结CSS 伪类是创建交互式界面的核心工具。通过本文的学习你应该能够使用状态伪类使用结构伪类使用表单伪类使用否定伪类创建悬停效果实现表单验证样式掌握这些技巧能够帮助你创建更加交互性和用户友好的界面。
