选择孩子的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，但没有嵌套

回答

相关问题