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，＆gt;，+，...但是我无法弄清楚如何做到这一点。

我现在能做的最好是覆盖第二组的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个孩子。

Answer 2

这是css而不添加类

.field-items:first-child > .item{color:red;}

CSS - 仅选择第一组类

2 个答案: