如何从多个类中选择nth-type？

我有这样的HTML代码：如何从多个类中选择nth-type？

<div class="products-wrap"> 
    <div class="product-item"></div> 
    <div class="product-item"></div> 
    <div class="clearfix-sm"></div> 
    <div class="product-item"></div> 
    <div class="clearfix-lg"></div> 
    <div class="product-item"></div> 
    <div class="clearfix-sm"></div> 
    <div class="product-item"></div> 
    <div class="product-item"></div> 
    <div class="clearfix-lg"></div> 
    <div class="product-item"></div> 
    ...etc 
</div>

我想用CSS只。产品项目类3 div的选择。我的问题是，nth-type-type（3n + 0）用所有div计数，所以第三个.product-item跳过。

我已经试过

.product-wrap > .product-item:nth-of-type(3n+0) { 
    ... 
}

，但它不工作。有没有其他方法？

感谢您的帮助:)

来源

2015-08-03 Jayme

类似的问题（可能重复）：http://stackoverflow.com/questions/6447045/css3-selector-first-of-type- with-class-name/6447072 – nelek

TL; DR：基于来自重复问题的回复，只有CSS才能完成。 – klaar

div { 
 
    width: 100px; 
 
    height: 40px; 
 
    border: 1px solid; 
 
} 
 

 
.product-item:nth-child(3n+1) { 
 
    background-color: red; 
 
}

<div class="products-wrap"> 
 
    <div class="product-item"></div> 
 
    <div class="product-item"></div> 
 
    <div class="product-item"></div> 
 
    <div class="product-item"></div> 
 
    <div class="product-item"></div> 
 
    <div class="product-item"></div> 
 
    <div class="product-item"></div> 
 
    <div class="product-item"></div> 
 
    <div class="product-item"></div> 
 
    <div class="product-item"></div> 
 
    <div class="product-item"></div> 
 
</div>

来源

2015-08-03 11:26:09

请重新阅读该问题。这不是OP问题的答案 –

如何从多个类中选择nth-type？

回答

相关问题