Remember a CSS problem that caused me to “roll over”

Yesterday read the desert teacher “CSS status quo and how to learn” article, encountered a let me “overturned” the problem.

Ex. :

.red {
  color: red
}
.blue {
  color: blue
}
Copy the code

<div class="red blue">Text1<div>
<div class="blue red">Text2<div>
Copy the code

So the question is, right? What will Text1 and Text2 look like in the end?

Such as:

.a {
  color: red;
}
.b {
  color: blue;
}
.a.b {
  color: orange;
}
.b.a {
  color: yellow;
}
Copy the code

<div class="a">Text</div>
<div class="b">Text</div>
<div class="a b">Text</div>
<div class="b a">Text</div>
Copy the code

What will the four divs in the chestnut look like?

Welcome to discuss in the comments section