如何为每个类分配不同的css翻译值？

<div class="class1" style="color: red;">This is class 1</div>
<div class="class2" style="color: blue;">This is class 2</div>

<div id="class1">This is class 1</div>
<div id="class2">This is class 2</div>

#class1 {
  color: red;
}

#class2 {
  color: blue;
}

<div class="class1">This is class 1</div>
<div class="class2">This is class 2</div>

.class1 {
  color: red;
}

.class2 {
  color: blue;
}

<div class="container">
  <div class="class1">This is class 1</div>
  <div class="class2">This is class 2</div>
</div>

.container .class1 {
  color: red;
}

.container .class2 {
  color: blue;
}