Question

考虑这个HTML：

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

现在我想定位.col的第一级孩子的.compress div：

.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 */
}

修改
如果你想在唯一（简单）解决方案之间有任意数量的元素，那么另一个类。

Answer 2

您可以使用.compress div:not(.row) > .col { ... }

诀窍是使用:not css选择器选择div的所有直接子项，其中.row不具有内部.col元素.row { {1}}作为父级，但外部.col没有。

＆＃13;

.compress div:not(.row) > .col {
  border: 1px solid #000;
  padding: 10px;
  margin: 5px;
}

＆＃13;

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

＆＃13;

选择子div但不嵌套

2 个答案: