Question

.headerValueStyle1 {
  font-weight: 700;
  font-size: 1.3rem;
  color: #575f7a;
  text-align: left;
  width: 8%;
}

例如，我有一个此类。我想从此类继承所有属性，但仅更改宽度（例如使其变为10％）。怎么做？我可以将其复制2次并进行更改。.但是我认为这不是一个好方法。

Answer 1

您可以将多个类应用于html元素，例如<span class="headerValue width8">，然后将同时使用.headerValue和.width8

结合css样式表（如

）

.headerValue{
  font-weight: 700;
  font-size: 1.3rem;
  color: #575f7a;
  text-align: left;
}
.width8{
  width: 8%;
}
.width10{
  width: 10%;
}

您可以实现这种“继承性”（实际上不是继承，而是我认为您正在寻找的东西）

Answer 2

快速而肮脏的解决方案：

.headerValueStyle1,
.anotherClass {
  font-weight: 700;
  font-size: 1.3rem;
  color: #575f7a;
  text-align: left;
  width: 8%;
}
.anotherClass {
  width: 100%;
}

只需重写下面的属性

如何继承类的主要部分，但更改某些值（css）

2 个答案: