Question

我正在尝试使用nth-child将某些样式应用于某些div。

我对第n个孩子的工作方式有误解。

在CSS中，层次结构为：ID，类，伪类，但在我的示例中，该类被忽略了。

我有一个父div，其中有7个子div。前三个子div的班级为kid1，接下来的四个div的班级为kid2。

.parent {
  border: 1px solid orangered;
  display: flex;
  flex-flow: row nowrap;
  height: 200px;
  width: 80%;
}

.kid1 {
  padding: 20px;
}

.kid1:nth-child(1) {
  background: lime
}

.kid1:nth-child(2) {
  background: blue
}

.kid1:nth-child(3) {
  background: yellow
}

.kid2 {
  padding: 20px;
}

.kid2:nth-child(1) {
  background: orange
}

/*is counting starting with first element of the parent*/

.kid2:nth-child(4) {
  background: red
}

.kid2:nth-child(3) {
  background: red
}

.kid2:nth-child(4) {
  background: cyan
}

<div class="parent">
  <div class="kid1">FIRST</div>
  <div class="kid1">FIRST</div>
  <div class="kid1">FIRST</div>

  <div class="kid2">SECOND</div>
  <div class="kid2">SECOND</div>
  <div class="kid2">SECOND</div>
  <div class="kid2"></div>
</div>

非常奇怪的部分是kid2的孩子div，因为不是从该类开始计数，而是从验证第一个元素开始计数，即为kid1。难道没人知道那里有那样的举动吗？

https://jsfiddle.net/twu75ax1/

对第n个孩子的误会

0 个答案: