的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等效的：具有（）

回答

相關問題