自定义现有样式时如何覆盖CSS属性？

你的代码存在两个核心问题：

• CSS不支持直接写1.62*1.62*1.62这类裸表达式，必须用calc()函数包裹计算逻辑
• 原样式里的grid-column-gap: 1.62缺少合法单位（比如rem、px），属性本身会被浏览器忽略，自然无法被覆盖

方案1：用calc()直接覆盖 #

先修正原样式的单位问题：

.grid-narrow {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-column-gap: 1.62rem; /* 补充有效单位 */
  /* 其他样式 */
}

然后编写覆盖样式，注意将.wideGap放在.grid-narrow样式代码之后（优先级相同时，后定义的样式会覆盖先定义的）：

.wideGap {
  grid-column-gap: calc(1.62rem * 1.62 * 1.62);
}

此时通过<div class="grid-narrow wideGap">即可正常覆盖目标属性。

方案2：用CSS变量提升灵活性 #

推荐用CSS变量管理间距，后续修改更便捷：

.grid-narrow {
  --grid-gap: 1.62rem; /* 定义变量存储间距值 */
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-column-gap: var(--grid-gap);
  /* 其他样式 */
}

.wideGap {
  --grid-gap: calc(1.62rem * 1.62 * 1.62); /* 直接修改变量 */
}

这种方式无需重复书写grid-column-gap属性，仅通过修改变量就能实现样式调整，扩展性更强。

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