Card 选中后改变样式

要实现 Card 被选中后改变样式，可以使用 CSS 的 :hover 和 :focus 伪类。具体实现方法如下：

1. 定义 Card 的选中状态样式：

.card-selected {
  background-color: #f5f5f5;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

2. 使用 :hover 和 :focus 伪类实现选中状态的样式变化：

.card:hover,
.card:focus {
  background-color: #f5f5f5;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

这样，当用户将鼠标悬停在 Card 上或者使用键盘 Tab 键将 Card 聚焦时，都会应用选中状态的样式。如果需要在 JavaScript 中动态设置选中状态，可以通过添加或移除 .card-selected 类来实现。