html - 具有两个类的元素的 CSS 选择器不起作用

Question

我正在尝试设置这些元素的样式，具有两个类的元素的样式不能与具有一个类的元素不同。我也尝试用 .red.balls 选择它，但它不起作用。

.ballsAll {
  display: block;
  margin-left: 14%;
}
.red {
  background-color: red;
}
.balls {
  background-color: white;
}

<div class='ballsAll'>
  <p>
    <span class='balls'>22</span>
    <span class='balls red'>11</span>
  </p>
</div>

Answer 1

在 .red 之前声明 .balls，像这样:

.ballsAll {
  display: block;
  margin-left: 14%;
}
.balls {
  background-color: white;
}
.red {
  background-color: red;
}


<div class='ballsAll'>
  <p>
    <span class='balls'>22</span>
    <span class='balls red'>11</span>
  </p>
</div>