css 属性 :nth-child(n)，有时获取不到想要的元素，因为...

描述：多层嵌套元素中，想要获取多个子元素下的某个元素，但是获取不到。

• 嵌套如下1

这样获取span 下的第二个元素

.condition-box {
  padding: 20px 30px 0;
  display: flex;
  flex-wrap: wrap;
  > span {
      padding: 0 20px;
  // 获取span下的第二个元素
    &:nth-child(2) {
      color: red;
    }
  }
}

结果：

第一个span 变色了。

结论 :nth-child(n) 取得是父元素下的所有元素的第n个元素，及时在制定的元素下去取值。

易混的另外属性使用：nth-type-of:

.condition-box {
  padding: 20px 30px 0;
  display: flex;
  flex-wrap: wrap;
  > span {
      padding: 0 20px;
  // 获取span下的第二个元素
    &:nth-of-type(2) {
      color: red;
    }
  }
}

结论

父元素下同类字元素的第n的元素。

两者的区别就是：是否包含同级元素下的其他元素。

有问题欢迎指正啊☺️