html - 选择子 div 但不嵌套

Question

考虑这个 HTML:

<div class="row compress">
  <div class="col"></div>
  <div class="col">
    <div class="row">
      <div class="col"></div>
    </div>
  </div>
</div>

现在我想定位 .col div，它们是 .compress 的一级子元素:

.compress > .col {
  padding: 0;
}

此 CSS 不会按计划影响嵌套的 .row 和 .col。但是，如果我稍微更改 HTML 以包含 .compress 和它的子 .col 之间的元素，如下所示:

<div class="row compress">
  <div>
    <div class="col"></div>
    <div class="col">
      <div class="row">
        <div class="col"></div>
      </div>
    </div>
  </div>
</div>

现在我的 CSS 不起作用，因为 .col 不是直接子级。

有没有办法像我的第一个示例那样选择 .col，但使用第二个示例的 HTML 以及 .compress 和 之间的任意数量的元素>.col?

作为最后的手段，我可​​以为所有子元素设置样式，然后为嵌套元素覆盖它们，但这并不理想:

.compress .col {
  padding: 0;
}

.compress .col .col {
  padding: 1em;
}

Answer 1

您可以使用类或以下选择器:

.compress > div > .col {
  /* Your styles here */
}

编辑:
如果你想在唯一(简单)的解决方案之间有任意数量的元素，那就是另一个类。