選擇孩子的div，但沒有嵌套

考慮這個HTML：選擇孩子的div，但沒有嵌套

<div class="row compress"> 
    <div class="col"></div> 
    <div class="col"> 
    <div class="row"> 
     <div class="col"></div> 
    </div> 
    </div> 
</div>

現在我想的目標.col的div是的.compress第一級子：

.compress > .col { 
    padding: 0; 
}

這個CSS不會影響嵌套.row按計劃.col。但是，如果我稍微改變HTML包括.compress之間的元素和其子.col像這樣：

<div class="row compress"> 
    <div> 
    <div class="col"></div> 
    <div class="col"> 
     <div class="row"> 
     <div class="col"></div> 
     </div> 
    </div> 
    </div> 
</div>

現在我的CSS不工作，因爲.col不是直接孩子。

有沒有辦法像我的第一個例子那樣選擇.col，但是使用第二個例子的HTML和.compress和.col之間的任意數量的元素？

作爲最後一招，我可以爲所有兒童設置樣式，然後覆蓋它們嵌套的元素，但這並不理想：

.compress .col { 
    padding: 0; 
} 

.compress .col .col { 
    padding: 1em; 
}

來源

2016-09-29 Coop

我覺得你寫的最後已經是正確的答案 - 我沒有看到任何其他的方式來做到這一點。 – Johannes

@Johannes的問題是，如果我將'compress'類添加到嵌套的'.row'中，由於更具體的選擇器'.compress .col .col'存在，樣式將被覆蓋。 – Coop

你可以使用類或以下選擇：

.compress > div > .col { 
    /* Your styles here */ 
}

編輯：
如果你想有任何數量的元素之間的唯一（簡單）解決方案將是另一個類。

來源

2016-09-29 11:59:10

請參閱我的部分問題，但是在.compress和.col之間有任意數量的元素。 – Coop

我編輯了我的帖子。 –

@Coop然後你應該使用_closest_ parent – AlexG

您可以使用.compress div:not(.row) > .col { ... }

的技巧是使用:not CSS選擇器選擇div的所有直接子女不具備.row類作爲內部.col元素都有.row父，但外.col沒有任何。

.compress div:not(.row) > .col { 
 
    border: 1px solid #000; 
 
    padding: 10px; 
 
    margin: 5px; 
 
}

<div class="row compress"> 
 
    <div> 
 
    <div class="col">Outer column</div> 
 
    <div class="col"> 
 
     Outer column 
 
     <div class="row"> 
 
     <div class="col"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-09-29 12:14:13

一個有趣的方法。這裏唯一的問題是如果嵌套的行也有一個內部div包裝它'.col'。你的例子中也會選擇'.col'。 – Coop

@Coop是的，但我發佈的解決方案特定於您在Post中提供的'HTML'結構。 –

是的，我感謝您的回答 - 這是解決問題的好方法，因此是+1。我試圖將這個應用到一個網格結構，所以試圖使這些設置成爲全局的，並適用於所有情況。我在我的問題中說過'.compress和.col'之間的任意數量的元素 – Coop

選擇孩子的div，但沒有嵌套

回答

相關問題