Question

在以下示例中：

<div class="section">
  <div class="row">...</div>
  <div class="row"> <- bottom margin here needs to be 0 ->
    <div class="section">
      <div class="row">...</div>
      <div class="row">...</div>
    </div>
  </div>
</div>

.row {
  margin-bottom:10px;
}

如果div .row是div。的父级，则将底部边距重置为0。

我可以用jquery做到这一点，但有没有办法在css中做到这一点？

Answer 1

目前CSS中无法选择其他元素的父元素。

但是，在CSS4中有:has伪类 - http://dev.w3.org/csswg/selectors-4/ :has

以下选择器仅匹配包含的元素子：
a:has(> img)
以下选择器匹配紧跟的元素另一个要素：
dt:has(+ dt)
以下选择器匹配不包含的元素任何标题要素：
section:not(:has(h1, h2, h3, h4, h5, h6))
请注意，上述选择器中的排序很重要。交换嵌套两个伪类，如：
section:has(:not(h1, h2, h3, h4, h5, h6))
...会匹配任何包含任何内容的元素那不是标题元素。

看起来您可能正在使用递归函数来生成节/行。如果它有子节，也许可以在行中添加一个类？然后你可以将该类目标应用于margin-bottom。

Answer 2

您可以通过对margin元素应用否定.section来执行此操作，该元素等同于margin元素的标准.row。

.row {
  margin-bottom: 20px;
}

.row > .section {
  margin-top: -20px;
}

Css相当于：has（）

2 个答案: