Question

我们说我有以下代码：

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

我如何选择＆＃34;容器内的每个实例＆＃34;使用CSS而不将其命名为类或ID，甚至使用style =＆＃34;＆＃34;元素本身？

提前致谢！

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>

这与之前的选择器略有不同。不同之处在于，这将选择divs immediate中的所有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 selector，如下所示：

.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>

希望这有帮助!!!

Answer 2

nth-of-type(n)或nth-child(n)将有效。

请参阅MDN documentation

.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可能是个好主意。

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

2 个答案: