nth-of-type选择器与兄弟选择器结合使用

Question

我对nth-of-type选择器如何与兄弟选择器一起工作感到困惑.在下面的例子中,我希望方块3,4和5是红色的,但它们不是..bar ~ div:nth-of-type(-n+3)下面的选择器如何选择元素？

如果我想.bar在正确的选择器之后获得前三个元素呢？

.foo {
  background-color: blue;
  color: white;
  width: 50px;
  height: 50px;
  display: inline-block;
  border: solid 1px black;
}
.bar {
  background: green;
}
.bar ~ div {
  background-color: orange;
}
.bar ~ div:nth-of-type(-n+3) {
  background-color: red;
}

<div>
  <div class="foo">0</div>
  <div class="foo">1</div>
  <div class="foo bar">2</div>
  <div class="foo">3</div>
  <div class="foo">4</div>
  <div class="foo">5</div>
  <div class="foo">6</div>
  <div class="foo">7</div>
</div>

Answer 1

.bar ~ div:nth-of-type(-n+3) 手段:

1. :nth-of-type(-n+3):选择其父级中其前三种类型中的每个元素
2. div:仅限于div元素
3. .bar ~:限制具有类的前一个兄弟(不一定是立即)的元素bar.

由于以下任何兄弟姐妹.bar都不在三个第一个div元素中,因此选择器与任何东西都不匹配.

如果你想.foo立即获得三个元素.bar,你可以使用:

.bar + .foo, .bar + .foo + .foo, .bar + .foo + .foo + .foo

.foo {
  background-color: blue;
  color: white;
  width: 50px;
  height: 50px;
  display: inline-block;
  border: solid 1px black;
}
.bar {
  background: green;
}
.bar ~ div {
  background-color: orange;
}
.bar + .foo, .bar + .foo + .foo, .bar + .foo + .foo + .foo {
  background-color: red;
}

<div>
  <div class="foo">0</div>
  <div class="foo">1</div>
  <div class="foo bar">2</div>
  <div class="foo">3</div>
  <div class="foo">4</div>
  <div class="foo">5</div>
  <div class="foo">6</div>
  <div class="foo">7</div>
</div>