Question

有人可以帮助我理解为什么下面的相邻组合子（+）不能用作css的注释部分。

相邻组合子（+）应匹配第二个选择器.btn，如果立即跟随第一个选择器，.btn-group根据https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors，所以我期待我的第一个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;
}

Answer 1

简单地说，.btn是.btn-group的孩子而不是相邻的兄弟。

您链接到的MDN文档：

相邻的兄弟组合子（+）将两个选择器分开，只有当它紧跟在第一个元素之后才匹配第二个元素，而都是同一个父元素的子元素。

强调我的，

Answer 2

adjacent sibling combinator (+)仅针对前一个同级元素，而不是子元素。这可以在以下内容中看到：

＆＃13;

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

＆＃13;

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

＆＃13;

如果您想定位第一个孩子，那么您确实需要使用.btn-group .btn:first-child。您可以使用.btn-group > .btn:first-child添加 child combinator (>) 以增加特异性，span { background-color: red; } /* Higher specificity with the child combinator */ .btn-group > .btn:first-child { background-color: blue; color: white; }：

＆＃13;

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

＆＃13;

span {
  background-color: red;
}

/* Higher specificity without the child combinator */
.btn-group .btn:first-child {
  background-color: blue;
  color: white;
}

＆＃13;

添加子组合子可以避免除了孩子之外的任何后代也将规则应用于它们，这可能会与伪选择器 :first-child 结合使用，如以下示例：

＆＃13;

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

＆＃13;

#create data
example<-replicate(30,rnorm(n=10))

#pseudo code
which(row of 2nd negative number for each column)
print row number that satisfies condition for each column

＆＃13;

希望这有帮助！：）

为什么CSS相邻组合器不能在这里工作？

2 个答案: