css - 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

不幸的是，使用 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

Answer 2

h3 + div + div + div + div{background-color:red;}

或匹配您的：

div.view-content h3 + div + div + div + div {
   margin-right: 0px;
}