如何让带特定类的网格单元格边框替换父容器边框？

给你几个实用的方案，能让目标单元格的绿色高亮边框正常显示，不会被父容器边框盖住：

方案1：使用outline属性（最推荐） #

outline是元素边框之外的线条，不占用布局空间，而且默认会显示在父容器边框的上方，完美解决遮挡问题：

.highlight-cell {
  outline: 1px solid green;
  /* 可选：调整outline和单元格边框的距离，默认0，负数可以让它更贴近单元格 */
  outline-offset: 0;
}

优点：不用改布局，代码极简；缺点：如果单元格是圆角的，outline会保持直角，和圆角不匹配。

方案2：用position + z-index提升层级 #

通过给目标单元格设置相对定位，提高它的层叠优先级，让边框盖在父容器边框上面：

.highlight-cell {
  position: relative;
  z-index: 1;
  border: 1px solid green;
  /* 如果原有单元格边框样式优先级更高，用!important强制覆盖，或者写更具体的选择器 */
  /* border: 1px solid green !important; */
}

注意：如果父容器设置了overflow: hidden，这个方法可能失效，因为超出父容器的部分会被裁剪。

方案3：用box-shadow模拟边框 #

box-shadow同样不占用布局空间，还能适配圆角单元格：

.highlight-cell {
  /* 0 0 0 1px 表示：水平偏移0，垂直偏移0，模糊半径0，扩散半径1px，颜色绿色 */
  box-shadow: 0 0 0 1px green;
}

优点：支持圆角，和单元格形状完全匹配；缺点：如果单元格本身有box-shadow样式，需要注意叠加效果。

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