具有深层的 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{&nbsp; background-color: green;}.content > .row > .row{&nbsp; background-color: white&nbsp;}<div class="content">&nbsp; <div class="row">Level 1 - Row 1</div>&nbsp; <div class="row">Level 1 - Row 2&nbsp; &nbsp; <div class="row">Level 2 - Row 1</div>&nbsp; &nbsp; <div class="row">Level 2 - Row 2</div>&nbsp; </div>&nbsp; <div class="row">Level 1 - Row 3</div></div>

Answer 2

选择器工作正常，绿色背景仅应用于父行，但子行元素也会显示它。您可以轻松地覆盖它。.content > .row {&nbsp; background-color: green;}.content > .row .row { background-color: red; }<div class="content">&nbsp; <div class="row">Level 1 - Row 1</div>&nbsp; <div class="row">Level 1 - Row 2&nbsp; &nbsp; <div class="row">Level 2 - Row 1</div>&nbsp; &nbsp; <div class="row">Level 2 - Row 2</div>&nbsp; </div>&nbsp; <div class="row">Level 1 - Row 3</div></div>