Question

所以基本上我有一个以下列方式吐出代码的设置..

<div class="parent">
   <div class="subparent">
      <div class="TARGETCLASS"></div>
   </div>
   <div class="subparent">
      <div class="TARGETCLASS"></div>
   </div>
</div> //close for the parent class

现在我要做的就是设计出一种方式的“TARGETCLASS”和以另一种方式排在第二位的“TARGETCLASS”。我试过第n个孩子，但无法达到我正在寻找的结果。无法在现有的“TARGETCLASS”类中添加其他类或ID。否则我不会发布这个问题：）

此外，“subparent”类也是相同的。对于两个targetclass类。这就是问题所在提前感谢您花时间为我回答这个问题。

干杯！

Answer 1

看起来你的html中有一些格式错误的标签。 nth-child应该可以正常工作。另外，请确保将nth-child选择器放在subparent课程上，而不是TARGETCLASS。错误放置子选择器很常见。试试这个：

<div class="parent">
  <div class="subparent">
    <div class="TARGETCLASS">
      first-child
    </div>
  </div>
  <div class="subparent">
    <div class="TARGETCLASS">
      second-child
    </div>
  </div>
</div>

<style>
.parent .subparent .TARGETCLASS {
  background-color:#f00;
}
.parent .subparent:nth-child(1) .TARGETCLASS {
  background-color:#0f0;
}
</style>

小提琴：https://jsfiddle.net/8ejxokuj/

Answer 2

我会像这样使用nth-of-type选择器：

.parent{}
.parent > .subparent {}  //targets both subparents
.parent > .subparent:nth-of-type(2) {} //targets the second subparent
.parent > .subparent:nth-of-type(2) > .TARGETCLASS{} //targets the child of the  second subparent

nth-of-type（）选择器使您能够在一个系列中设置特定元素的样式，在这种情况下，我们将第二个.subparent定位，然后指定我们需要的子项。我希望这有帮助！

Answer 3

看起来，它正在由第n个孩子工作。它是关于如何称呼孩子的。不像“要求父母找到第n个孩子，而是问孩子，他离父母有多远”

.parent .subparent:nth-child(1) {background: #FEE; color:RED;}
.parent .subparent:nth-child(2) {background: #EEF; color:blue;}

<div class="parent">
<div class="subparent">
<div class="TARGETCLASS">aaa</div>
</div>
<div class="subparent">
<div class="TARGETCLASS">bbb</div>
</div>
//close for the parent class
</div>

我如何设计两个相同的div类别？

3 个答案: