尝试理解第n类型的css选择器

I'm trying to understand why this nth-of-type selector isn't working as expected. My goal is to make the first .row element red, and all others after the first blue, while leaving the items in green as they are.

我试着理解为什么这个nof类型的选择器不能像预期的那样工作。我的目标是使第一个。row元素红色，所有其他元素在第一个蓝色之后，同时保留绿色的项。

https://jsfiddle.net/darrengates/pa34zyjd/14/

.wrapper div {
  width: 200px;
  background-color: green;
  color: white;
  margin: 5px;
  padding: 5px;
}
.wrapper .row:nth-of-type(n+1) {
  background-color: red;
}
.wrapper .row:nth-of-type(n+2) {
  background-color: blue;
}

<div class="wrapper">
  <div class="option">option</div>
  <div class="button">some button</div>
  <div class="row">I wanna be red</div>
  <div class="row">I wanna be blue</div>
  <div class="row">I wanna be blue</div>
  <!-- all other row elements after the first should be blue -->
</div>

更多相关文章

随机推荐