CSS - 为最后一个孩子添加颜色

Question

.d1 {
  display: flex;
  justify-content: space-between;
}

.d1>div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
}

.d1>div>span:last-child {
  color: green;
  font-size: 30px;
}

.d1>div>span:nth-child(2n) {
  color: red;
}

.d1>div>span:nth-child(2n+1) {
  color: blue;
}

<div class="d1">
  <div>
    <span>2</span>
    <span>+3</span>
    <span>5</span>
    <span>+6</span>
    <span>11</span>
  </div>
  <div>
    <span>7</span>
  </div>
</div>

在上面的示例中，我试图为使用 javascript 代码执行的两个不同列实现加法。该行是从底部到顶部。最后显示的数字必须更大

font-size

和绿色

color

。这

font-size

适用于两列，但不适用于

color

。我在

color: green

中添加了

span:last-child

但这似乎不起作用......我该如何解决这个问题？谢谢

Answer 1

要解决此问题，您可以更新 CSS 代码以强制更改最后一个元素的颜色，如下所示：

.d1>div>span:last-child {
  color: green !important;
  font-size: 30px;
}

（注意：使用

!important

会覆盖应用于该元素的任何其他样式，除非绝对必要，否则通常认为使用它是不好的做法）