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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

在.red之前声明.ball，像这样：

.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>

Answer 2

使用此代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;