为什么 :nth-child 应用于 children's 的孩子？ [复制]答案

【问题标题】：Why is :nth-child applied on the childrens of childrens? [duplicate]为什么 :nth-child 应用于 children's 的孩子？ [复制]
【发布时间】：2021-03-06 00:03:03
【问题描述】：

@media screen and (max-width: 500px) {
  .flexed-form-wr :nth-child(1) { order: 1; }
  .flexed-form-wr :nth-child(2) { order: 3; }
  .flexed-form-wr :nth-child(3) { order: 2; }
  .flexed-form-wr :nth-child(4) { order: 4; }
}

.flexed-from-wr 有 4 个孩子，应该在移动设备上更改它们的顺序。这工作正常，但其中一个孩子也有孩子，同样的代码也适用于他们。为什么会发生这种情况，我该如何预防？

【问题讨论】：

你能发布你的html代码吗？或者尝试在这里使用> ..flexed-form-wr > :nth-child(1)
“为什么会这样” - 为什么它不会发生？一个孩子的孩子，它本身还是一个孩子。

标签： html css

【解决方案1】：

如果您不希望将规则应用于大孩子，可以使用> children 运算符：

@media screen and (max-width: 500px) {
  .flexed-form-wr > :nth-child(1) { order: 1; }
  .flexed-form-wr > :nth-child(2) { order: 3; }
  .flexed-form-wr > :nth-child(3) { order: 2; }
  .flexed-form-wr > :nth-child(4) { order: 4; }
}

为什么会这样？

:nth-child() 选择器也会选择所有属于父子节点的第 n 个子节点的子节点。

【讨论】：