具有深层的 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;

}

.content > .row > .row{

  background-color: white

 }

<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 2

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

.content > .row {

  background-color: green;

}

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

<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>