html - 深层次的 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>

标签： htmlcsscss-selectors

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>