CSS实现hover非特色卡片时切换特色卡片及子元素样式问题

核心问题：选择器语法错误 #

你之前的代码存在两个关键语法问题，导致无法定位到子元素：

1. 类选择器必须以.开头，你写的benefits__card缺少前缀，浏览器无法识别为类选择器。
2. 伪类:last-child的写法错误，正确格式是.benefits__card:last-child，而非benefits__card(:last-child)（多余的括号是语法错误）。

修正后的可运行代码 #

补全正确的选择器后，就能正常控制特色卡片的子元素样式了，以下是完整的样式示例：

/* 初始状态：DOM最后一个卡片（视觉第一个）为特色样式 */
.benefits__card:last-child {
  background-color: black;
}
.benefits__card:last-child h3 {
  color: #fff; /* 初始特色标题颜色 */
}

/* hover其他卡片时，取消原特色卡片的样式（包括子元素） */
.benefits__card:not(:last-child):hover ~ .benefits__card:last-child {
  background-color: #fff; /* 恢复默认背景 */
}
.benefits__card:not(:last-child):hover ~ .benefits__card:last-child h3 {
  color: var(--black); /* 修改特色卡片的h3颜色 */
}

/* hover当前卡片时，将其设为特色样式 */
.benefits__card:not(:last-child):hover {
  background-color: black;
}
.benefits__card:not(:last-child):hover h3 {
  color: #fff;
}

额外优化建议 #

1. 确保Grid布局正确实现“DOM最后一个卡片视觉排第一”的效果，比如用网格区域控制位置：

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: 
    "feature card1"
    "feature card2";
}
.benefits__card:last-child {
  grid-area: feature;
}

2. 如果后续卡片数量可能变化，:last-child的依赖会不够灵活，建议给特色卡片单独加类（比如.benefits__card--featured），选择器会更清晰：

<div class="benefits__grid">
  <div class="benefits__card">...</div>
  <div class="benefits__card">...</div>
  <div class="benefits__card">...</div>
  <div class="benefits__card benefits__card--featured">...</div>
</div>

对应CSS修改为：

.benefits__card:not(.benefits__card--featured):hover ~ .benefits__card--featured h3 {
  color: var(--black);
}

内容的提问来源于stack exchange，提问作者Krzysztof Hejna