有什么方法可以将css3限制nth-of-type为一个类吗?我有动态的section元素数量,其中有不同的类来指定其布局需求。我想抓住每3rd.module,但似乎nth-of-type查找类元素类型,然后计算类型。相反,我想将其限制为仅.modules。
nth-of-type
section
.module
谢谢!
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; }
不幸的是nth-of-type,由于nth-of-class不存在,因此无法(至少我不知道)选择一个类。您可能必须为每三分之二.module手动添加一个新类。
nth-of-class