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，其他行有10个或更多。

我最初编写的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

Answer 2

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

或与你匹配：

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

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

2 个答案: