html - 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 也得到了 color: red; 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 个 child 。