时间戳

首页 > 解决方案 > :nth-child() 和 :nth-of-type() 不起作用

html - :nth-child() 和 :nth-of-type() 不起作用

问题描述

这是我的代码大大简化的codepen，但它仍然无法正常工作。:nth-child 在 w3schools 交互式编码页面上工作，所以它不是我的电脑。

.postPrevWrap:nth-child(odd) {
  background: red;
}
<div class="postPrevWrap">
  <div class="postPrev">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="postPrev">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

https://codepen.io/anon/pen/dQzYwj

我究竟做错了什么？

标签： htmlcsscss-selectors

解决方案

:nth-child应该应用于孩子本身，而不是包装：

所以而不是：

.postPrevWrap:nth-child(odd)

做这个：

.postPrev:nth-child(odd)

推荐阅读