CSS - 仅选择第一组类

Question

我试图弄清楚如何只选择第一组类并将CSS应用于它.

在下面的代码中,我试图在第一组div上使用类.item来应用颜色

<div class="field-items">
  <div class="item">This text should be red</div>
  <div class="item">This text should be red</div>
    <div class="field-items">
      <div class="item">This text should NOT be red</div>
      <div class="item">This text should NOT be red</div>
      <div class="item">This text should NOT be red</div>
      <div class="item">This text should NOT be red</div>
    </div>
  <div class="item">This text should be red</div>
  <div class="item">This text should be red</div>
</div>

问题是第二组.item div也得到了颜色:红色; CSS.我一直在玩选择器,如:nth-​​child,:nth-​​of-type,>,+,...但我无法弄清楚如何做到这一点.

我现在能做的最好是覆盖第二组的css.

.item {
  color: #cc3333;    
}
.item .item {
  color: #000;
}

任何帮助表示赞赏.

Answer 1

您需要找出哪个元素是顶级的父级.field-items,然后将其与>组合器一起附加到选择器.例如,如果您的父元素是.parent:

.parent > .field-items > .item {
  color: #cc3333;
}

.field-items > .item单独使用是不够的,因为你也.field-items嵌套在里面.field-items,两者都有.item孩子.