伪类选择器

伪类选择器用于选择元素的特定状态，而不是基于元素的标签名、类名或 ID。伪类选择器以冒号 : 开头，能够根据元素的状态、位置或关系来选择元素。

状态伪类

状态伪类根据元素的当前状态来选择元素，如鼠标悬停、点击、获得焦点等。

:hover 伪类

:hover 伪类选择鼠标悬停在元素上的状态。

/* 链接悬停效果 */
a:hover {
  color: #e74c3c;
  text-decoration: underline;
}

/* 按钮悬停效果 */
.button:hover {
  background: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* 卡片悬停效果 */
.card:hover {
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  transform: translateY(-5px);
}

:active 伪类

:active 伪类选择元素被激活（被点击）的状态。

/* 按钮点击效果 */
.button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 链接点击效果 */
a:active {
  color: #c0392b;
}

/* 输入框聚焦点击效果 */
input:active {
  border-color: #007bff;
}

:focus 伪类

:focus 伪类选择获得焦点的元素，通常用于表单元素。

/* 输入框聚焦效果 */
input:focus,
textarea:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}

/* 按钮聚焦效果 */
button:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* 链接聚焦效果 */
a:focus {
  outline: 2px dashed #007bff;
  outline-offset: 2px;
}

:visited 伪类

:visited 伪类选择已访问过的链接。

/* 已访问链接样式 */
a:visited {
  color: #8e44ad;
}

/* 已访问链接悬停效果 */
a:visited:hover {
  color: #9b59b6;
}

:link 伪类

:link 伪类选择未访问过的链接。

/* 未访问链接样式 */
a:link {
  color: #3498db;
  text-decoration: none;
}

表单伪类

表单伪类专门用于表单元素，根据表单元素的状态来选择。

:checked 伪类

:checked 伪类选择被选中的复选框、单选框或选项。

/* 选中的复选框 */
input[type="checkbox"]:checked {
  accent-color: #007bff;
}

/* 选中的单选框 */
input[type="radio"]:checked {
  accent-color: #007bff;
}

/* 选中的选项 */
option:checked {
  background: #007bff;
  color: white;
}

:disabled 伪类

:disabled 伪类选择禁用的表单元素。

/* 禁用的输入框 */
input:disabled {
  background: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

/* 禁用的按钮 */
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

:enabled 伪类

:enabled 伪类选择启用的表单元素。

/* 启用的输入框 */
input:enabled {
  background: white;
  border: 1px solid #ddd;
}

/* 启用的按钮 */
button:enabled {
  cursor: pointer;
}

:required 伪类

:required 伪类选择设置了 required 属性的表单元素。

/* 必填字段 */
input:required,
textarea:required,
select:required {
  border-left: 3px solid #e74c3c;
}

input:required::placeholder {
  color: #e74c3c;
}

:optional 伪类

:optional 伪类选择没有设置 required 属性的表单元素。

/* 可选字段 */
input:optional,
textarea:optional,
select:optional {
  border-left: 3px solid #28a745;
}

:valid 伪类

:valid 伪类选择通过验证的表单元素。

/* 有效的输入框 */
input:valid {
  border-color: #28a745;
}

input:valid + .success-icon {
  display: inline-block;
  color: #28a745;
}

:invalid 伪类

:invalid 伪类选择未通过验证的表单元素。

/* 无效的输入框 */
input:invalid {
  border-color: #e74c3c;
}

input:invalid + .error-icon {
  display: inline-block;
  color: #e74c3c;
}

结构伪类

结构伪类根据元素在文档树中的位置或关系来选择元素。

:first-child 伪类

:first-child 伪类选择父元素的第一个子元素。

/* 列表的第一项 */
ul li:first-child {
  font-weight: bold;
  color: #2c3e50;
}

/* 表格的第一行 */
table tr:first-child {
  background: #f5f5f5;
  font-weight: bold;
}

/* 段落的第一行 */
p:first-child {
  font-weight: bold;
}

:last-child 伪类

:last-child 伪类选择父元素的最后一个子元素。

/* 列表的最后一项 */
ul li:last-child {
  margin-bottom: 0;
}

/* 卡片列表的最后一项 */
.card:last-child {
  margin-bottom: 0;
}

/* 表格的最后一行 */
table tr:last-child {
  border-bottom: none;
}

:nth-child 伪类

:nth-child 伪类选择父元素的第 n 个子元素。

/* 列表的奇数项 */
ul li:nth-child(odd) {
  background: #f5f5f5;
}

/* 列表的偶数项 */
ul li:nth-child(even) {
  background: #e9ecef;
}

/* 列表的第三项 */
ul li:nth-child(3) {
  font-weight: bold;
}

/* 列表的每第四项 */
ul li:nth-child(4n) {
  border-bottom: 2px solid #007bff;
}

:nth-last-child 伪类

:nth-last-child 伪类从父元素的最后一个子元素开始计数。

/* 列表的倒数第二项 */
ul li:nth-last-child(2) {
  font-weight: bold;
}

/* 列表的最后三项 */
ul li:nth-last-child(-n+3) {
  color: #e74c3c;
}

伪类选择器的组合使用

伪类选择器可以与其他选择器组合使用：

/* 类选择器 + 伪类选择器 */
.button:hover {
  background: #0056b3;
}

/* ID 选择器 + 伪类选择器 */
#main-nav a:hover {
  background: #555;
}

/* 属性选择器 + 伪类选择器 */
input[type="text"]:focus {
  border-color: #007bff;
}

/* 多个伪类选择器 */
.button:hover:active {
  background: #004494;
}

/* 组合选择器 + 伪类选择器 */
.nav-menu > li:hover > a {
  background: #555;
}

实际应用示例

交互式按钮

/* 按钮基础样式 */
.button {
  display: inline-block;
  padding: 12px 24px;
  background: #007bff;
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 悬停效果 */
.button:hover {
  background: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* 点击效果 */
.button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 聚焦效果 */
.button:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* 禁用状态 */
.button:disabled {
  background: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
}

表单验证样式

/* 输入框基础样式 */
.form-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: border-color 0.3s ease;
}

/* 必填字段 */
.form-input:required {
  border-left: 3px solid #e74c3c;
}

/* 聚焦效果 */
.form-input:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}

/* 有效状态 */
.form-input:valid {
  border-color: #28a745;
}

/* 无效状态 */
.form-input:invalid {
  border-color: #e74c3c;
}

/* 禁用状态 */
.form-input:disabled {
  background: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

/* 只读状态 */
.form-input:readonly {
  background: #f5f5f5;
  cursor: not-allowed;
}

导航菜单

/* 导航菜单基础样式 */
.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li {
  display: inline-block;
  position: relative;
}

.nav-menu a {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
  transition: background 0.3s ease;
}

/* 悬停效果 */
.nav-menu a:hover {
  background: #555;
}

/* 当前页面链接 */
.nav-menu a.active {
  background: #007bff;
}

/* 已访问链接 */
.nav-menu a:visited {
  color: white;
}

/* 聚焦效果 */
.nav-menu a:focus {
  outline: 2px dashed #007bff;
  outline-offset: -2px;
}

总结

伪类选择器让我们能够根据元素的状态、位置或关系来选择元素，是实现交互效果的重要工具：

1. 状态伪类：根据元素的当前状态选择元素
2. 表单伪类：专门用于表单元素的伪类
3. 结构伪类：根据元素在文档树中的位置选择元素
4. 组合使用：可以与其他选择器组合使用

记住以下几点：

• 理解不同伪类选择器的应用场景
• 伪类选择器是实现交互效果的重要工具
• 注意伪类选择器的顺序（特别是链接伪类）
• 合理使用伪类选择器可以提高用户体验
• 伪类选择器可以与其他选择器组合使用

在接下来的章节中，我们将学习伪元素选择器，进一步完善我们的 CSS 选择器知识。