如何從多個類中選擇nth-type？

Question

我有這樣的HTML代碼：

<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) { 
    ... 
} 

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

感謝您的幫助:)

Answer 1

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>