Question

.outer:nth-child(3) > div{
   color:red;
}

<div class="outer">
  <div>1st deep element</div>
  <div>1st deep element</div>
  <div>
    <div>2nd deep element</div>
  </div>
</div>

如何仅使用外部类选择器控制第二个深层元素样式？

Answer 1

以这种方式定位

.outer div:nth-child(3)

.outer div:nth-child(3) > div{
   color:red;
}

<div class="outer">
  <div>1st deep element</div>
  <div>1st deep element</div>
  <div>
    <div>2nd deep element</div>
  </div>
</div>

Answer 2

您正在.outer类上应用:nth-child pseudo-class selector，因此请用direct child selector >分隔它。

.outer > :nth-child(3) > div{
   color:red;
}

<div class="outer">
  <div>1st deep element</div>
  <div>1st deep element</div>
  <div>
    <div>2nd deep element</div>
  </div>
</div>

Answer 3

使用此

.outer div:nth-child(3)>div:nth-child(1){
   color:red;
}

Answer 4

我为你开玩笑。

https://jsfiddle.net/gnfkqj1y/

.outer >div:nth-child(3)  > div{
   color:red;
}

Answer 5

您要控制的div元素是另一个div元素的子元素，因此您应先从父元素传播到子元素，然后在此处选择该子元素。简单!! @@＃

div>div:nth-child(2){
   color:red;
}

<div class="outer">
  <div>1st deep element</div>
  <div>1st deep element</div>
  <div>
    <div>2nd deep element</div>
  </div>
</div>

Answer 6

<div class="wrapper">
 <div class="flowContent">
  <div>
     <div class="rd_1">Container #2</div>
     <div class="rd_2">Container #2</div>
  </div>
 </div>

如果我们想在不使用子类名并使用父类名的情况下为第N个子子级添加样式

<块引用>

CSS

.wrapper > div:nth-child(1) > div:first-child{
  display: flex
 }
.wrapper > div:nth-child(1) > div:first-child > div:nth-child(1){
  color: red
 }
.wrapper > div:nth-child(1) > div:first-child >div:last-child{
  color: green
 }

如何为第n个孩子的内部div应用样式？

6 个答案: