Card选中后改变样式 :focus不生效

如果使用 `:focus` 选择器来实现选中后样式改变，需要注意的是，它只会在元素获取焦点时生效，例如当用户使用Tab键或鼠标点击元素时，会触发元素的 `:focus` 状态。而当用户点击其他地方时，元素就会失去焦点，`:focus` 状态也会消失，所以样式也会回到原来的状态。

因此，如果要实现选中后样式改变的效果，可以使用 `:active` 或者 `:visited` 等选择器，这些选择器在元素被点击或者被访问时都会生效。例如：

.selected_card:active {
  background-color: #87cefa;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

另外，如果你想实现选中后样式一直保持不变，可以考虑使用状态来控制样式，具体方法可以参考我之前的回答。

相关问题

.card:focus 不生效

首先，请确认你的HTML中是否有一个class名为"card"的元素，它需要是一个可聚焦的元素，如button或input等。其次，确认你的CSS中是否有如下代码：

.card:focus {
  /* 你的样式代码 */
}

如果还是不生效，可能是其它CSS样式覆盖了该样式，你可以尝试使用!important关键字强制使用该样式：

.card:focus {
  /* 你的样式代码 */
  !important;
}

如果还是有问题，请提供更多的代码和细节描述。

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 类来实现。