的CSS等效的：具有（）

在下面的例子：的CSS等效的：具有（）

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

来源

2015-03-13 user3176519

不，CSS没有父选择器。 – 2015-03-13 16:53:06

只是为了澄清，您指向的div的底部边距实际上是将空间添加到div块的最底部。这是你想消除的空间？ – j08691 2015-03-13 16:54:02

为什么不使用'.row：last-child {margin-bottom：0px;}'这样的东西''CSS不能往上走，只能往下走，因此是'级联'部分。 – 2015-03-13 16:57:34

您可以通过对与.row元素的标准边距等效的.section元素应用负边距来做到这一点。

.row { 
    margin-bottom: 20px; 
} 

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

来源

2015-03-13 16:54:51

目前在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应用于。

来源

2015-03-13 17:00:40

您正在将CSS选择器与CSS相混合。如果'：has（）'选择器在CSS中可用，它仍然未定。请参阅您链接到的文档中有关快速/完整配置文件的部分。 – BoltClock 2015-03-13 18:09:35

的CSS等效的：具有（）

回答

相关问题