CSS/jQuery nth-child，用于深度嵌套的div结构
CSS/jQuery nth-child，用于深度嵌套的div结构
提问于 2015-10-12 17:42:14
我有一个非常嵌套的div结构，我正试着将它分成3列进行排序。
<div class="view-content">
<div class="view-grouping">
<h1>Group 1</h1>
<div class="view-grouping-content">
<div class="views-limit-grouping-group">
<h2>Subgroup 1</h2>
<div class="views-limit-grouping">
<div class="custom-widget">Item 1</div>
</div>
<div class="views-limit-grouping">
<div class="custom-widget">Item 2</div>
</div>
</div> <!-- end of Subgroup 1 -->
<div class="views-limit-grouping-group">
<h2>Subgroup 2</h2>
<div class="views-limit-grouping">
<div class="custom-widget">Item 3</div>
</div>
</div> <!-- end of Subgroup 2 -->
<div class="views-limit-grouping-group">
<h2>Subgroup 3</h2>
<div class="views-limit-grouping">
<div class="custom-widget">Item 4</div>
</div>
<div class="views-limit-grouping">
<div class="custom-widget">Item 5</div>
</div>
<div class="views-limit-grouping">
<div class="custom-widget">Item 6</div>
</div>
</div> <!-- end of Subgroup 3 -->
</div> <!-- end of inner Group 1 wrapper -->
</div> <!-- end of Group 1 -->
<div class="view-grouping">
<h1>Group 2</h1>
<div class="view-grouping-content">
<div class="views-limit-grouping-group">
<h2>Subgroup 4</h2>
<div class="views-limit-grouping">
<div class="custom-widget">Item 7</div>
</div>
<div class="views-limit-grouping">
<div class="custom-widget">Item 8</div>
</div>
</div> <!-- end of Subgroup 4 -->
<div class="views-limit-grouping-group">
<h2>Subgroup 5</h2>
<div class="views-limit-grouping">
<div class="custom-widget">Item 9</div>
</div>
</div> <!-- end of Subgroup 5 -->
<div class="views-limit-grouping-group">
<h2>Subgroup 6</h2>
<div class="views-limit-grouping">
<div class="custom-widget">Item 10</div>
</div>
<div class="views-limit-grouping">
<div class="custom-widget">Item 11</div>
</div>
<div class="views-limit-grouping">
<div class="custom-widget">Item 12</div>
</div>
</div> <!-- end of Subgroup 6 -->
</div> <!-- end of inner Group 2 wrapper -->
</div> <!-- end of Group 2 -->每三个(3n+3) .custom-widget应该有一个margin-right: 0;
如果我使用：
.view-grouping .view-grouping-content .views-limit-grouping-group:nth-child(3n+3) .custom-widget{
margin-right: 0;
}由于嵌套的div结构，它将无法工作。
这是一个动态布局(在Drupal构建中使用它)，因此可以有任意数量的组、子组。此外，还可以有任何no。如果前面提到的任何分组DIVs中的项。
为了举一个简单的例子，我将主包装器设置为320px，它应该包装3个元素，包括前2个项目的10px间距。
我完全可以使用CSS和jQuery来解决这个问题。你知道我该怎么做吗？
谢谢!
附注: jsFiddle：https://jsfiddle.net/6m2bqaa1/1/
回答 1
Stack Overflow用户
发布于 2015-10-12 17:57:02
Use nth-of-type, hopefully it will help you:
.views-limit-grouping-group > div:nth-of-type(3) .custom-widget{margin-right:0}
or you can add whole css as under:
h1, h2 {
display: none;
}
.views-limit-grouping-group{clear:both; overflow:hidden}
.views-limit-grouping{float:left}
.view-content{
position: relative;
margin: 0 auto;
width: 320px;
}
.custom-widget{
background-color: lightblue;
float: left;
width: 100px;
height: 100px;
margin-top: 10px;
margin-right: 10px;
}
.views-limit-grouping-group > div:nth-of-type(3) .custom-widget{
margin-right: 0;
background: red;
}
your problem will be solve.页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33077935
复制相关文章
相似问题
腾讯云开发者
