CSS css3 nth 类型限制为类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10921809/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css3 nth of type restricted to class
提问by technopeasant
Is there any way to limit css3's nth-of-typeto a class? I've got a dynamic number of sectionelements with different classes designating their layout needs. I'd like to grab every 3rd .module, but it seems that nth-of-typelooks up classes element type and then calculates the type. Instead I'd like to limit it to only .modules.
有没有办法将 css3 限制nth-of-type为一个类？我有一个动态数量的section元素，它们具有不同的类来指定它们的布局需求。我想抓住每 3rd .module，但似乎nth-of-type查找类元素类型，然后计算类型。相反，我想将其限制为仅.modules。
Thanks!
谢谢！
JSFiddle to demonstrate: http://jsfiddle.net/danielredwood/e2BAq/1/
JSFiddle 来演示：http: //jsfiddle.net/danielredwood/e2BAq/1/
HTML:
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:
？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;
}?
回答by r0skar
Unfortunately, there is no way (at least none I know of) to select nth-of-typeof a class, since nth-of-classdoesnt exist. You will probably have to add a new class to every third .modulemanually.
不幸的是，没有办法（至少我不知道）选择nth-of-type一个类，因为它nth-of-class不存在。您可能必须.module手动为每三分之一添加一个新类。
回答by Eduardo Wada
It seems what you really want is the css4 :nth-match selector, but it's not really supported in most browsers yet, so currently, the only way to do it is with javascript
看起来你真正想要的是css4 :nth-match selector，但大多数浏览器还没有真正支持它，所以目前，唯一的方法是使用 javascript
$(".featured.module").filter(function(index, element){
return index % 3 == 2;
}).addClass("third");
