css3 nth 类型限制为类 [英] css3 nth of type restricted to class

问题描述

有什么办法可以将 css3 的 nth-of-type 限制为一个类?我有一个动态数量的 section 元素，它们具有不同的类来指定它们的布局需求.我想获取每第三个 .module，但似乎 nth-of-type 查找 classes 元素类型，然后计算类型.相反，我想将其限制为仅 .modules.

Is there any way to limit css3's nth-of-type to a class? I've got a dynamic number of section elements with different classes designating their layout needs. I'd like to grab every 3rd .module, but it seems that nth-of-type looks up classes element type and then calculates the type. Instead I'd like to limit it to only .modules.

谢谢！

JSFiddle 演示:http://jsfiddle.net/danielredwood/e2BAq/1/

JSFiddle to demonstrate: 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;
  }​

推荐答案

不幸的是，没有办法(至少我知道没有)选择一个类的 nth-of-type，因为nth-of-class 不存在.您可能需要手动向每三个 .module 添加一个新类.

Unfortunately, there is no way (at least none I know of) to select nth-of-type of a class, since nth-of-class doesnt exist. You will probably have to add a new class to every third .module manually.

这篇关于css3 nth 类型限制为类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！