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

问题描述

有没有办法限制css3的 nth-of-type 到一个类？我有一个动态数量的节元素有不同的类指定他们的布局需求。我想抓住每三个 .module ，但似乎 nth-of-type 查找类元素类型，然后计算类型。相反，我想限制为 .module 。

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;
  }​

推荐答案

（至少没有我知道）选择类的第n种，因为第n类的不存在。您可能必须手动向第三个 .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屋！