Question

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

如果我想在.bar之后获得前三个元素，那么选择哪一个？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

.bar ~ div:nth-of-type(-n+3)表示：

:nth-of-type(-n+3)：在其父
div：仅限div元素
.bar ~：限制使用类bar的前兄弟（不一定是立即）的元素。

由于.bar中的任何一个兄弟姐妹都不是三个第一个div元素中的一个，因此选择器不匹配任何内容。

如果您希望在.foo之后立即获取三个.bar元素，则可以使用：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: