有没有办法共享常见的 CSS 类？

Question

我有 5 个 CSS 类。除了一行之外，它们完全相同。有没有一种方法可以创建一个 CSS 类，然后让其他 5 个 CSS 类继承该类，然后添加它自己的特定类？

正如您在下面看到的，唯一不同的行是这一行......

背景图像: url("../Images/vertTabsButton2.gif");

.divMasterCol1Button1 {
  float: left;
  border-style: none;
  border-width: thin;
  background-image: url("../Images/vertTabsButton1.gif");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  width: 215px;
  height: 700px;
  margin: 0px auto;
  padding: 0px;
  text-align: center;
}
.divMasterCol1Button2 {
  float: left;
  border-style: none;
  border-width: thin;
  background-image: url("../Images/vertTabsButton2.gif");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  width: 215px;
  height: 700px;
  margin: 0px auto;
  padding: 0px;
  text-align: center;
}

Answer 1

如果不使用像 SASS 这样的预编译器，你就无法实现继承。但是，您可以通过将公共属性拆分为单个类并通过其他 ID 或类应用剩余的唯一属性来完成您想要的任务。

.commonProperties {
  float: left;
  border-style: none;
  border-width: thin;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  width: 215px;
  height: 700px;
  margin: 0px auto;
  padding: 0px;
  text-align: center;
}

.divMasterCol1Button2 {
  background-image: url("../Images/vertTabsButton2.gif");
}

.divMasterCol1Button1 {
  background-image: url("../Images/vertTabsButton2.gif");
}