Css相当于：has（）[重复]

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 .section 的父级，则将底部边距重置为 0。

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

Answer 1

您可以通过对.section 元素应用一个否定的margin 来做到这一点，它相当于.row 元素的标准margin。

.row {
  margin-bottom: 20px;
}

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

Answer 2

目前在 CSS 中无法选择另一个元素的父元素。

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

以下选择器仅匹配包含 <img> 的 <a> 元素 孩子：

a:has(> img)

以下选择器匹配<dt> 元素，紧跟其后 另一个<dt> 元素：

dt:has(+ dt)

以下选择器匹配不包含的 <section> 元素 任何标题元素：

section:not(:has(h1, h2, h3, h4, h5, h6))

请注意，在上述选择器中排序很重要。交换嵌套 两个伪类，比如：

section:has(:not(h1, h2, h3, h4, h5, h6))

...将匹配任何包含任何内容的 <section> 元素 这不是标题元素。

看起来您可能正在使用递归函数来生成您的部分/行。如果它有子部分，也许可以在行中添加一个类？然后你可以定位那个类来应用 margin-bottom 。