html - 在另一个 div 中选择奇数子 DIV

Question

我有一个主要的 div(类 catpopular)和四个嵌套的 div(类 item)。我只需要在 CSS 中选择奇数嵌套的 div。请注意，在嵌套的 div 中也有 div，但 css 应该忽略它。 html 是 -

<div class="catpopular">
   <div class="item">
      <h2>Heading</h2>
      <div>content</div>
   </div>

   <div class="item">
      <h2>Heading</h2>
      <div>content</div>
   </div>

   <div class="item">
      <h2>Heading</h2>
      <div>content</div>
   </div>

   <div class="item">
      <h2>Heading</h2>
      <div>content</div>
   </div>

   <div class="item">
      <h2>Heading</h2>
      <div>content</div>
   </div>
</div> 

css 已尝试 -

.catpopular .item:nth-child(odd){

}

但它不起作用。请帮忙

Answer 1

首先，您没有正确关闭您的 div 标签。要选择所有奇怪的元素，您可以在您的示例中使用以下 css 代码，因此您的 css 代码是正确的!

.catpopular .item:nth-child(odd) {
    border: 1px solid red;
}

我还制作了一个 jsfiddle 来说明:https://jsfiddle.net/78kxk7ds/