CSS中:last-child颜色样式不生效，字号正常显示问题求助

问题代码 #

CSS

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

HTML

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

问题原因 #

核心问题在于：CSS的:last-child选择的是DOM结构里的最后一个元素，而非flex-direction: column-reverse视觉上的最后一个元素。

用column-reverse后，视觉最底部的是DOM里的第一个<span>，但:last-child选中的是DOM末尾的<span>（比如第一列的11）。这个元素同时被nth-child(2n+1)选中，两者优先级相同，但因为nth-child(2n+1)写在:last-child之后，蓝色样式覆盖了绿色。

解决方案 #

要让**视觉上最底部的元素（DOM里的第一个元素）**显示绿色，应该用:first-child选择器，同时确保样式优先级能覆盖其他颜色规则：

修复后的CSS（方案1：快速解决）

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

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

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

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

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

修复后的CSS（方案2：避免!important）

如果不想用!important，可以通过更具体的选择器提升优先级：

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

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

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

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

/* 仅给非第一个的奇数项设置蓝色 */
.d1>div>span:nth-child(2n+1):not(:first-child) {
  color: blue;
}

这样就能让视觉上的最后一个元素正确显示绿色，同时保留其他元素的颜色样式。

内容的提问来源于stack exchange，提问作者darkchampionz