仅针对尽管：nth-​​child（1）仍无法工作的第一个直接孩子

Question

所以基本上我有这个标记，它是我正在处理的组件的非常简化的输出。

在CSS上，我只想给第一个直接子对象设置样式（应用灰色），但是即使添加了nth-child(1)，它也将样式应用于间接嵌套的孩子。为什么是这样？我该如何解决？

.row {
margin: 5px 0;
}

.row.row-selected{ border-left: 1px solid red; }

.row.row-selected .row-data:nth-child(1) {
    background-color: #d5d5d5;
}

<div class="row row-selected">
  <div class="row-data">Foo1</div>
 
  <div class="row" style="margin-left: 20px">
    <div class="row-data">Foo1Child1</div>
  </div>
 
  <div class="row" style="margin-left: 20px">
    <div class="row-data">Foo1Child2</div>
  </div>
 
</div>

<div class="row">
  <div class="row-data">Foo2</div>
 
  <div class="row" style="margin-left: 20px">
    <div class="row-data">Foo2Child1</div>
  </div>
 
  <div class="row" style="margin-left: 20px">
    <div class="row-data">Foo2Child2</div>
  </div>
 
</div>

Answer 1

我认为您正在寻找父/子选择器？

.row.row-selected > .row-data {
    background-color: #d5d5d5;
}

这可确保仅选择类别为.row.row-selected的{​​{1}}的直接子代。

Answer 2

它适用于所有嵌套元素，因为您在选择器之间使用了descendant combinator（空格字符）：

.row.row-selected .row-data:nth-child(1) { }

此组合器以第一个选择器的所有指定后代（不仅是子代）为目标。

此外，在所有情况下，目标元素（.row-data）实际上都是父元素的第一个子元素（:nth-child(1)）。

相反，请使用child combinator（>），它仅以元素的子元素为目标。

.row.row-selected > div:nth-child(1) {
  background-color: #d5d5d5;
}

.row {
  margin: 5px 0;
}

.row.row-selected {
  border-left: 1px solid red;
}

<div class="row row-selected">
  <div class="row-data">Foo1</div>
  <div class="row" style="margin-left: 20px">
    <div class="row-data">Foo1Child1</div>
  </div>
  <div class="row" style="margin-left: 20px">
    <div class="row-data">Foo1Child2</div>
  </div>
</div>

<div class="row">
  <div class="row-data">Foo2</div>
  <div class="row" style="margin-left: 20px">
    <div class="row-data">Foo2Child1</div>
  </div>
  <div class="row" style="margin-left: 20px">
    <div class="row-data">Foo2Child2</div>
  </div>
</div>