Css 为什么没有'；t组合器在这里不工作？

有人能帮我理解为什么下面的相邻组合词（+）不能作为css的注释部分工作吗

相邻的组合符（+）应与第二个选择器

.btn

匹配，如果它紧跟在第一个选择器之后，即

.btn group

，根据，因此我希望我的第一个btn的背景变为蓝色

<div class="btn-group">
  <button class="btn">
    Save
  </button>

  <button class="btn">
    Revert
  </button>
</div>

/* .btn-group .btn:first-child {
  background-color: blue;
  color: white;
} */

.btn-group + .btn {
  background-color: blue;
  color: white;
}

拯救
还原
/*.btn组.btn:第一个孩子{
背景颜色：蓝色；
颜色：白色；
} */
.btn组+.btn{
背景颜色：蓝色；
颜色：白色；
}

简单地说，

.btn

是

.btn组的子组

不是相邻的兄弟姐妹

从链接到的MDN文档：

相邻的同级组合符（+）分隔两个选择器，并且仅当第二个元素紧跟在第一个元素之后时才匹配第二个元素，这两个元素都是同一父元素的子元素

---

强调我的，

简单地说，

.btn

是

.btn组的孩子

不是相邻的兄弟姐妹

从链接到的MDN文档：

相邻的同级组合符（+）分隔两个选择器，并且仅当第二个元素紧跟在第一个元素之后时才匹配第二个元素，这两个元素都是同一父元素的子元素

强调我，

唯一的目标是紧跟在前面的兄弟元素，而不是子元素。这可以从以下几点看出：

.btn组+.btn{
背景颜色：蓝色；
颜色：白色；
}

拯救
还原
目标

仅针对紧靠前一个兄弟元素，而不是子元素。这可以从以下几点看出：

.btn组+.btn{
背景颜色：蓝色；
颜色：白色；
}

拯救
还原
目标