：第一，孩子不同的類名稱

<div class="home-view"> 
    <div class="view-header">Header</div> 
    <div class="view-content">Content</div> 
</div>

而且我想風格home-view的第一個項目。在這種情況下，它是view-header，但有時沒有標題，並且view-content將成爲home-view中的第一項。

home-view中的第一項應該有一些樣式。

我一直在嘗試與.home-view:first-child，但沒有運氣，因爲它的兒童有不同的類名（我認爲）。有什麼建議？

2013-07-18 Michiel

請問這個[訴訟]（http://jsfiddle.net/7cNZS/1/）？ – Vucko

.home-view > *:first-child { background-color:red; }

...將選擇第一個孩子的任何類型的第一個子元素。

2013-07-18 08:42:53

謝謝，但是與Kevin相同。包含的div全部包含更多的div，並且每個第一個div都標記爲紅色... – Michiel

@Michiel然後您需要「child of」，'>'，[參見編輯]（http://jsfiddle.net/KxYd6/）。 –

你救了我的一天！謝謝！ – Michiel

-3

試試這個：

$('.home-view').children().eq(0);

2013-07-18 08:38:48

沒有_JQuery_標籤。 – Vucko

確實。 JQuery不是一個選項... – Michiel

哦..錯過了，我的壞！ –

由於這兩種元素是div是你可以。家裏視圖中指定的第一div

.home-view div:first-child{ 
    background: red; 
}

2013-07-18 08:40:09

朝着正確的方向邁出一步，但兩個div都包含一些嵌套的div，並且div內的每個第一個div都標記爲紅色...... – Michiel

您對之前的答案做出了迴應，您只希望將直接子元素設置爲樣式，而不是對它們下面的子元素。

所以我會適應這些問題的答案，讓你滿足這一要求一個答案：

.home-view>div:first-child{ 
    background: red; 
}

這裏的區別是.home-view和div，而不是空間的>選擇。這迫使它只選擇.home-view的直接子元素，而不選擇更靠近樹的div，而它們之間的空間會告訴它在樹下選擇任何匹配的子元素。

希望有所幫助。

2013-07-18 08:47:58 Spudley

.home-view > div:first-of-type{ background-color:red; }

第一種類型的選擇器匹配每個元素，該元素是其父類的第一個特定類型的子元素。

2013-07-18 09:23:37

回答