0

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

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

<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;
}

任何帮助表示赞赏。

4

2 回答 2

5

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

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

单独使用.field-items > .item是不够的，因为您还.field-items嵌套了 within .field-items，它们都有.item孩子。

于 2013-10-13T11:04:11.780 回答
0

这是没有添加类的css

.field-items:first-child > .item{color:red;}
于 2013-10-13T11:07:47.950 回答