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选择只有.product-item类的第3个div。我的问题是：nth-of-type（3n + 0）计算所有div，所以第3个.product-item跳过。

我已经尝试了

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

但它不起作用。还有其他办法吗？

感谢您的帮助：）

Answer 1

＆＃13;

div {
  width: 100px;
  height: 40px;
  border: 1px solid;
}

.product-item:nth-child(3n+1) {
  background-color: red;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: