CSS 恢复到定义的样式

Question

在我的应用程序中，一个经常使用的 HTML 组件是这样的样式:

.box {
  min-width: 100px;
  padding: 20px 10px;
}

有很多这样的(100+)，它们的边框样式没有底部并且颜色不同:

.box:nth-child(1) {
  border: 2px solid red;
  border-bottom: none;
}
.box:nth-child(2) {
  border: 2px solid green;
  border-bottom: none;
}
.box:nth-child(3) {
  border: 2px solid blue;
  border-bottom: none;
}
.box:nth-child(4) {
  border: 2px solid yellow;
  border-bottom: none;
}

...

应用程序中有一个页面，所有这些框都需要以全边框(包括底部边框)显示 - 需要删除“boder-bottom:none”定义。所以在这个特定的页面中，我试图覆盖 .box 定义:

.box {
  border-bottom: initial; /* tried unset as well...*/
}

但这仍然没有边框。有没有一种方法可以指定一种样式，以便所有 .box 都接受完整的边框 - 或者我必须重新定义所有底部边框？

-丹

Answer 1

为什么不为该组件定义另一个类并为该类定义 border-bottom 并将其作为 !important

.another_class{
 border-bottom: 1px solid #efefef !important;
}