Question

假设我有一个带有三个子div的父div，我想给每个孩子一个不同的背景颜色，这可以只用一个nth子选择器完成 - 我的父div有一个“父”类和三个孩子有“child1”，“child2”，“child3”等类。

感谢。

Answer 1

你只能通过一个规则和一个选择器来实现这一目标。

在CSS中，每个规则都会将一组特定样式应用于与其选择器匹配的所有元素。这是CSS工作原理的一个基本方面。您不能在单个规则中使用不同的声明有选择地应用于特定元素 - 它们都将被覆盖，只留下一个获胜声明，该声明将应用于所有匹配的元素。即使您在同一规则中有多个选择器，即使您使用:nth-child()而不是类选择器，也是如此。

例如，

.child1, .child2, .child3 {
  background-color: red;
  background-color: blue;
  background-color: yellow;
}

被视为

.child1, .child2, .child3 {
  background-color: yellow;
}

将黄色背景应用于所有三个孩子，尽管和 ，因为列出了所有三个孩子的事实。 .parent > :nth-child(1), .parent > :nth-child(2), .parent > :nth-child(3)作为选择器也是如此。

因此，如果要以不同方式设置三个元素的样式，则需要三个规则，每个元素对应一个：

.child1 {
   background-color: red;
}

.child2 {
   background-color: blue;
}

.child3 {
   background-color: yellow;
}

同样，无论您使用哪个选择器实际到达每个子元素，都是如此。关键是每个样式声明集（property: value对）都需要出现在它自己的selector {}规则集中。

Answer 2

如果您的子元素使用不同的类，为什么要使用第n个选择器？第N选择器应该用于没有类选择器或内容是动态的元素。在这种特殊情况下，您不需要第n个选择器，只需使用

.parent .child1 {
  background-color: #d3d3d3;
}

.parent .child2 {
  background-color: #000;
}

<div class="parent">
  <div class="child1">child1</div>
  <div class="child2">child2</div>
</div>

我可以使用一个nth-child（）选择器定位多个div吗？

2 个答案: