如何使用CSS选择特定DIV内的元素实例？

Question

假设我有以下代码：

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

如何在不给元素命名class或id，甚至不使用style=""的情况下，使用CSS选择器选中"container"内的每个实例？

提前感谢！

- Gabriel Ferraz

---

以下答案很好。我刚刚看到了这篇文章，它可能也会有所帮助。 https://robots.thoughtbot.com/basic-css-selectors-explained-with-cats - Joel

Answer 1

解决方案1：直接子元素选择器

您需要使用CSS选择器>。这将针对所有直接子元素。

例如：

.className > element {
}

请参考下面的内容：

.container > div {
  height: 40px;
  width: 100%;
  background-color: orange;
  margin:10px;
  }

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

解决方案2：嵌套子元素选择器

你也可以按照以下方式使用它：

.className element {
}

请看下面内容：

.container div {
  background-color: orange;
  height: 30px;
  width: 100%;
  margin: 10px;
  }

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

这个选择器和之前的选择器略有不同。区别在于它将选择所有直接父级为immediate divs的 divs （包括嵌套的子元素）。要理解其效果，请参见下面：

.container div {
  background-color: orange;
  height: 30px;
  width: 100%;
  margin: 10px;
}

<div class="container">
  <div></div>
  <div></div>
  <div>
    <div></div>
    <div></div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</div>

解决方案3：特定子元素选择器（nth-child）

如果您只想选择特定/特定集合的直接子元素，可以使用以下nth-child选择器：

.className > element:nth-child(n) {
}

请见下文：

.container > div {
  background-color: orange;
  height: 30px;
  width: 100%;
  margin: 10px;
}

.container > div:nth-child(3n+1) {
  background-color: red;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

解决方案4：嵌套的特定子选择器（nth-child）

最后，您可以结合上述选择器来针对特定的子元素以及子元素的子元素，如下所示：

.className > element:nth-child(n) {
}

请看下面：

.container div {
  background-color: orange;
  height: 30px;
  width: 100%;
  margin: 10px;
}
.container div:nth-child(3n+1) {
  background-color: red;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</div>

希望这可以帮助您！

- Satwik Nadkarny

---

在列出的四个解决方案中，只有一个是正确的。尽管它提供了至少一个正确的解决方案，但我不能在良心上投赞成票，因为在所有错误的解决方案中找到它是如此不必要地困难。 - BoltClock

@BoltClock，你能进一步解释一下你认为哪一行是正确的吗？另外，其他的为什么是错误的？据我所知（并且演示本身也表明），所有这些都可以“target”包含的divs，而不需要在它们上面显式地提及id或class，顺便说一下，这也是最初的问题？ - Satwik Nadkarny

问题在于如何选择特定的实例。您的前两个解决方案没有选择特定的实例，它们选择了所有子元素或所有后代元素。正确的解决方案是第三个或第四个取决于标记 - 如果您没有处理任何嵌套，则两者都可以。 - BoltClock

嗯，@BoltClock，这是一种推断。问题是“我该如何选择每个实例...”。根据您的评论，您推断出“问题正在询问如何选择特定实例”。你看，问题并没有明确提到“特定实例”。然而，你却做了这样的推断。这个问题非常开放，可以有不同的解释。它可能意味着选择每个实例或者特定实例。我希望你明白，如果你有奢侈品去以某种方式解释它，那么其他人也有奢侈品去以另一种方式解释它。 - Satwik Nadkarny

@BoltClock，与您所说的“在列出的四个解决方案中，只有一个是正确的”相反，我提供了解决方案来回答这两种解释中的每一种（请看这里的每个含义）。这些解决方案都是正确的。即使您对问题的解释不同，您仍然找到了一个解决方案，对吗？因此，如果您不想点赞答案，那就不要点赞，这是公平的。但是，请不要评论说它们是“错误的”，只是因为它们不符合您推断问题的方式。 - Satwik Nadkarny

你看，这个问题没有明确提到“具体实例”。这就是标题。我没有推断任何东西。但我承认任何人都可以按照自己的想法解释一个问题。 - BoltClock

Answer 2

nth-of-type(n)或nth-child(n)都可以使用。

请参阅MDN文档

.container div:nth-of-type(2) {
  /* selects the second one */
  color: red;
}

<div class="container">
  <div>test</div>
  <div>test</div>
  <div>test</div>
</div>

编辑：哎呀！看起来我和Satwik Nadkarny都以不同的方式理解了你的问题。在我的答案中可能使用>是个好主意（使它成为.container > div:nth-of-type(2)），以避免选择第一组嵌套的div。

- Joseph Marikle