具有深层次的CSS选择器

Question

在下面的html / css代码中，我只想选择级别1而不是更深的所有元素“行”。但是子选择器还会选择嵌套的“行”元素吗？如何仅选择级别1“行”元素？

.content > .row
{
  background-color: green;
}

<div class="content">
  <div class="row">Level 1 - Row 1</div>
  <div class="row">Level 1 - Row 2
    <div class="row">Level 2 - Row 1</div>
    <div class="row">Level 2 - Row 2</div>
  </div>
  <div class="row">Level 1 - Row 3</div>
</div>

Answer 1

选择器工作正常，绿色背景仅应用于父行，但子行元素也继承了它。您可以轻松地覆盖它。

.content > .row {
  background-color: green;
}

.row1 { background-color: red; }

<div class="content">
  <div class="row">Level 1 - Row 1</div>
  <div class="row">Level 1 - Row 2
    <div class="row row1">Level 2 - Row 1</div>
    <div class="row row1">Level 2 - Row 2</div>
  </div>
  <div class="row">Level 1 - Row 3</div>
</div>