如何为3x9网格的不同grid-item复用CSS hover样式，无需单独定义27个选择器

最优实现方案 #

1. 抽离通用CSS样式，减少重复代码

你当前27个类的重复属性占了90%的代码量，完全可以抽成一个公共类，仅保留定位属性在带序号的类中：

/* 通用样式全部放在公共类里 */
.grid-item {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  border: 3px solid rgba(255, 254, 5, 0.4);
  border-radius: 10px;
  color: rgba(255, 254, 5, 0.4);
  column-gap: 10px;
  display: grid;
  height: auto;
  width: auto;
  padding: 5px;
  /* 加过渡让hover动效更平滑 */
  transition: all 0.25s ease;
}

/* 所有网格项的hover效果只需要写这一次 */
.grid-item:hover {
  /* 这里写你要的动效，比如向上偏移+边框高亮，可自定义 */
  transform: translateY(-6px);
  border-color: rgba(255, 254, 5, 0.9);
  color: rgba(255, 254, 5, 0.9);
}

/* 带序号的类仅保留定位属性，代码量大幅减少 */
.grid-item1 {
  grid-column-start: 1;
  grid-row-start: 1;
}
.grid-item2 {
  grid-column-start: 2;
  grid-row-start: 1;
}
.grid-item3 {
  grid-column-start: 3;
  grid-row-start: 1;
}
/* 剩下24个序号类同理，仅写grid-column-start和grid-row-start即可 */

2. 调整HTML结构，无需额外套层

不需要给每个网格项额外包裹div，只需要给原有网格项的class属性同时加上公共类和对应序号类即可：

<div class="grid-container">
  <div class="grid-item grid-item1">
    <div class="grid-name">
      <p class="skill">A</p>
    </div>
    <div class="grid-image">
      <img src="/static/icons/A.png">
    </div>
    <div class="grid-rank">
      <p class="small">Current rank: 200000000</p>
    </div>
    <div class="grid-level">
      <p class="small">Current level:100</p>
    </div>
    <div class="grid-xp">
      <p class="small">Current XP: 200000000</p>
    </div>
  </div>
  <div class="grid-item grid-item2">
    <!-- 内部内容保持不变 -->
  </div>
  <!-- 剩余25个网格项同理修改class属性即可 -->
</div>

之前套层方案失效的原因

CSS Grid布局只会对容器的直接子元素应用网格定位规则，你给原有网格项套了.grid-item-style外层div后，网格容器的直接子元素变成了.grid-item-style，而你没有给这个类设置任何网格定位属性，原有带序号的.grid-itemX不再是网格容器的直接子元素，定位规则完全失效，所以效果不符合预期。

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