有没有办法将CSS3的
nth-of-type限制为一个类？我有动态的section元素，其中的不同类指定了它们的布局需求。我想抓住每第3个.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;
}
#1 楼
不幸的是，由于nth-of-type不存在，因此无法选择（至少我不知道）选择类的nth-of-class。您可能必须手动为每三个.module添加一个新类。评论
无法选择类的：nth-of-type（），因为：nth-of-type（）仅选择其类型的第n个子代。另请参阅stackoverflow.com/questions/6447045/…
– BoltClock♦
2012年6月21日11:04
nth-of-type的行为是如此出乎意料。 .thing：nth-of-type（1）实际上是div.thing：nth-of-type（1），因此，如果不将元素包含在选择器中，则会造成混乱。如果您不认为这是意外的，那么为什么在开发人员中引起如此多的困惑呢？
–Intellix
13年7月7日在10:01
@Dominic Watson：我认为这里的问题在于，大多数作者都不熟悉术语“元素类型”，Selectors使用它来代替HTML / XML特定的术语“标签名称”。这在选择器4级中得到了一些澄清，但并没有太多。
– BoltClock♦
13年7月31日在21:05
以我的拙见，这是非常可悲和不直观的。应该是匹配选择器的第n个实体，而不仅仅是标记名称。 CSS限制，很不幸。
–机器人Robok
10月4日15:42
#2 楼
看来您真正想要的是css4：nth-match选择器，但大多数浏览器尚未真正支持该选择器，因此，目前，唯一的方法是使用javascript$(".featured.module").filter(function(index, element){
return index % 3 == 2;
}).addClass("third");
http://jsfiddle.net/w3af16dj/
评论
为什么将元素作为参数传递给函数？不使用
–bg17aw
16年8月6日在15:45
因为我认为这对SO读者是有用的参考，所以当我编写此答案时，我必须检查文档以记住哪个参数最先出现。我还假设有些人会修改代码。
–爱德华多·瓦达（Eduardo Wada）
17 Mar 24 '10：00
不知道谁会对此表示反对，却提供了当前答案和（仍然）未来答案。为了节省您的精力，在2017年Chrome仍然不支持nth-match。不需要帮我检查其他浏览器。
–Regular Joe
17-10-27在17:26
在2017年底仍然有用-我想替换li：class：nth-match（4n + 1），并且我更改了上面的函数以返回索引％4 == 0;感谢您的小提琴，让我可以玩转并正确处理！
–詹森
17年11月20日在15:21
@RegularJoe猜测它被否决了，因为元素和索引按通常习惯的顺序交换。.但是它有效：D
– Shidizzle
6月18日5:02
评论
：nth-of-type（）是伪类，而不是伪元素。