有什么办法可以将 css3 限制nth-of-type
在一个类中吗?我有动态数量的section
元素,它们具有不同的类来指定它们的布局需求。我想每 3rd 抓取一次.module
,但似乎nth-of-type
查找类元素类型然后计算类型。相反,我想将其限制为仅.module
s。
谢谢!
JSFiddle 演示:http: //jsfiddle.net/danielredwood/e2BAq/1/
HTML:
<section class="featured video">
<h1>VIDEO</h1>
</section>
<section class="featured module">
<h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
<h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
<h1>NOT A VIDEO (3)</h1>
</section>
<section class="featured module">
<h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
<h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
<h1>NOT A VIDEO (6)</h1>
</section>
CSS:
.featured {
width:31%;
margin:0 0 20px 0;
padding:0 3.5% 2em 0;
float:left;
background:#ccc;
}
.featured.module:nth-of-type(3n+3) {
padding-right:0;
background:red;
}
.featured.video {
width:auto;
padding:0 0 2em 0;
float:none;
}