重度嵌套的div结构的CSS/jQuery nth-

Question

我有一个很重的嵌套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构建中使用它），因此可以有任意数量的组，子组。此外，可以有任何没有。如果任何前面提到的分组DIV中的项目。

为了一个简单的例子，我把主包装器放在320px的位置，它应该包装3个元素，包括前两个项目的10px间距。

我完全可以同时使用CSS和jQuery来解决这个问题。你有什么想法，我应该如何解决这个问题？

谢谢！

P.S. jsFiddle here：https://jsfiddle.net/6m2bqaa1/1/

Answer 1

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.