CSS - 将相邻选择器与 nth-of-type 结合使用

Question

我想做的是选择标题标记后的每四个 DIV。这是我正在使用的代码的基本概念。

<div class="view-content"> 

   <h3>The Heading</h3> 
   <div></div>  
   <div></div>
   <div></div>
   <div>Trying to select this DIV</div>

   <h3>The Heading</h3> 
   <div></div>  
   <div></div>
   <div></div>

   <h3>The Heading</h3> 
   <div></div>  
   <div></div>
   <div></div>
   <div>Trying to select this DIV</div>  
   <div></div>
   <div></div>
   <div></div>
   <div>Trying to select this DIV</div>

</div><!-- .view-content -->

我使用的是 Drupal，所以我仅限于编写 CSS 来安排内容。我试图选择每四个 DIV 的原因是因为一行有四个 DIV，我想从一行的第四个(也是最后一个)DIV 中删除右边距。有些行只有一个或两个 DIV，而其他行有十个或更多。

我最初编写的 CSS(似乎不起作用)是:

div.view-content h3 + div:nth-of-type(4n) {
margin-right: 0px;
}

可能是我想多了，也可能是没有办法。不管怎样，请帮忙!

Answer 1

不幸的是，它出现了there's no nice, general way to do this with CSS3 .从此处发布的其他答案中汲取灵感，您可以将其用于有限数量的元素:

div.view-content h3 + div+div+div+div,
div.view-content h3 + div+div+div+div + div+div+div+div,
div.view-content h3 + div+div+div+div + div+div+div+div + div+div+div+div /*etc*/ {
    margin-right: 0px;
}

http://cssdesk.com/Ty7Gf