html - 如何从多个类别中选择第 n 个类型?

标签 html css css-selectors

<分区>

我有这个 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 类的第三个 div。我的问题是,:nth-of-type(3n+0) 与所有 div 一起计数,因此跳过第三个 .product-item。

我试过了

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

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

感谢您的帮助:)

最佳答案

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>

关于html - 如何从多个类别中选择第 n 个类型?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31785937/

上一篇:html - 是否可以使用纯 CSS 实现 Mega 下拉菜单?

下一篇:html - 在同一容器内居中和 float

相关文章:

javascript - jQuery切换允许父元素的默认href并且父元素应该显示子元素(切换)

HTML 电子邮件 : Images go beyond its limited width in outlook

html - 如何使用 bootstrap 对齐组中的复选框

html - 获得第一个 child

html - 当不在另一个元素内时定位一个元素(即所有不在段落内的 anchor )

javascript - 更改样式表中数据 URL 加载的 SVG 图像的填充颜色

jquery - 使用在jquery中具有特定ID的链接查找所有div

html - <a> 标签中的文本未垂直居中

html - 如何将宽度不是 100% 的元素居中

java - 如何在 Selenium 自动化测试中管理 Gmail 中 COMPOSE 按钮的动态 ID