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

Posted 2023-03-06

【中文标题】Css相当于：has（）[重复]

【英文标题】：Css equivalent of :has() [duplicate]

【发布时间】：2015-05-16 06:16:39

【问题描述】：

在以下示例中：

<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 中做到这一点？

【问题讨论】：

不，CSS 没有父选择器。

澄清一下，您指向的 div 的下边距实际上为您的 div 块的最底部添加了空间。这就是你要消除的空间？

为什么不使用 .row:last-child margin-bottom:0px; 这样的 CSS 不能上升，只能下降，因此是 cascading 部分。

@Nick R：“级联”一词完全指的是其他东西。与父母无关 -> 孩子。

【参考方案1】：

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

.row 
  margin-bottom: 20px;


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

【讨论】：

并非在所有情况下都有效

【参考方案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 。

【讨论】：

您将 CSS 选择器与 CSS 混为一谈。 :has() 选择器是否可以在 CSS 中使用还不确定。请参阅您链接到的文档中有关快速/完整配置文件的部分。

:has() 仍然不受支持 developer.mozilla.org/en-US/docs/Web/CSS/:has

只是一个旁注。 CSS4 不存在，也永远不会存在。这只是带有 4 级选择器的常规 CSS :) – css-tricks.com/css4