CSS更改一个类的单个元素，而无需使用其他类名

Question

我想知道是否有办法做到这一点。

我只想更改特定CSS类的单个属性，而不必再次复制它并分配不同的类名。

所以，如果我有这堂课

<div class="example">I am a red font with properties </div>

这是CSS

.example {
font-size:2em;
font-color:red;
padding:2%;
display:inline;
//other several properties }

现在，我想在另一个div中使用example类，但是我只希望字体为绿色。我不想复制相同的属性，而只是分配不同的类名，

<div class="example2">I am a green font with properties </div>

同样，example2与example相同，但是只有字体颜色会改变

这是CSS

.example2 {
 font-size:2em;
 font-color:green;
 padding:2%;
 display:inline;
 //other several properties same as example class

有没有一种方法可以导入CSS属性，而无需对其进行复制和重命名？就像是

<div class="example" onlychange="font-color:green">
           I am a green font with properties </div>

有什么技术可以实现诸如onlychange属性之类的东西吗？

Answer 1

这有两种方法。首先是添加另一个类，并单独更改一个属性，第二个类属性将替换前一个类的属性（如果这两个属性同时存在）。

第二种方法是将其编写为嵌入式样式。不需要额外的课程！

.example {
  font-size: 2em;
  color: red;
  padding: 2%;
  display: inline;
}

.green {
  color: green;
}

<span class="example green">test</span>

<span class="example" style="color:green;">test</span>