CSS 伪类完全指南

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([type="submit"]) { 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; }

Q2：nth-child 不生效？

A：确保选择器正确：

li:nth-child(2) { /* 正确 */ } ul:nth-child(2) { /* 选择第2个ul元素 */ }

Q3：focus 样式不显示？

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 伪类是创建交互式界面的核心工具。通过本文的学习，你应该能够：

1. 使用状态伪类
2. 使用结构伪类
3. 使用表单伪类
4. 使用否定伪类
5. 创建悬停效果
6. 实现表单验证样式

掌握这些技巧，能够帮助你创建更加交互性和用户友好的界面。