相当于:has()的CSS [英] Css equivalent of :has()

问题描述

在以下示例中:

<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.

If div .row is parent of div .section reset bottom margin to 0.

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

I can do this with jquery, but is there a way to do it in css?

推荐答案

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

At the moment there is no way in CSS to select the parent element of another element.

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

However, in CSS4 there is the :has pseudo-class - http://dev.w3.org/csswg/selectors-4/ :has

以下选择器仅匹配包含 孩子:

the following selector matches only elements that contain an child:

a:has(> img)

以下选择器匹配一个紧随其后的元素 另一个元素:

The following selector matches a element immediately followed by another element:

dt:has(+ dt)

以下选择器匹配不包含的元素 任何标题元素:

The following selector matches elements that don’t contain any heading elements:

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

请注意，在上面的选择器中排序很重要.交换嵌套 两个伪类中的一个，例如:

Note that ordering matters in the above selector. Swapping the nesting of the two pseudo-classes, like:

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

...将匹配包含任何元素的任何元素的结果 那不是标题元素.

...would result matching any element which contains anything that’s not a header element.

您似乎正在使用递归函数来生成节/行.如果有子节，也许在该行中添加一个类?然后，您可以定位该类以将margin-bottom应用于该类.

It looks like you may be using a recursive function to generate your sections/rows. Perhaps add a class to the row if it has sub-sections? Then you could target that class to apply margin-bottom to.

这篇关于相当于:has()的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！