CSS - 只選擇第一組類

我想弄清楚如何只選擇一個類的第一組，並將CSS應用到它。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-type-type，>，+，...但我無法弄清楚如何做到這一點。

現在我可以最好的是重寫第二組的CSS。

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

任何幫助表示讚賞。

來源

2013-10-13 Jrn

'.item .item'將不匹配任何內部的'.item's你有因爲內部'點域，items'實際上是一個孩子外部'.field-items'。你可能是指'.field-items .field-items .item'。 – BoltClock

您需要找出頂級.field-items的父級元素是什麼元素，然後將它與>組合子一起連接到選擇器。例如，如果你的父元素是.parent：

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

使用.field-items > .item是不夠的，因爲你也有嵌套在.field-items，這兩者有.item孩子.field-items。

來源

2013-10-13 11:04:11 BoltClock

這樣做的訣竅，我忘了父母選擇器...愚蠢的我。感謝您的幫助，感激。 – Jrn

這裏是CSS不添加類

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

來源

2013-10-13 11:07:47 David

這個假設外層的'.field-items'是第一個孩子，而內部的不是。請注意，「第一個孩子」並不意味着最外層的元素。 – BoltClock

當前html結構的代碼 – David

CSS - 只選擇第一組類

回答

相關問題