重度嵌套的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.