更改另一個div內的第一個div的顏色，且介於

Question

我在以下代碼中注意到這一點：

<div id="test1">
    <div>1Lorem ipsum</div>
    <div>2Lorem ipsum</div>
</div>

有了這個CSS：

#test1 div:first-child{
    color:red;
}

第一個div（1Lorem ...）將顯示為紅色，但是如果我將html更改為此：

<div id="test1">
    <h2>Header</h2>
    <div>Lorem ipsum</div>
    <div>Lorem ipsum</div>
</div>

第一個div將不再顯示紅色。 誰能告訴我如何在保持h2的同時使第一個div（1Lorem ...）顯示為紅色？ 我必須將h2保留在那里，並且確實需要使用一種方法，將第一個孩子的div更改為紅色。

Answer 1

#test1 div:first-child僅選擇一個也是第一個孩子的div

#test1 div:first-of-type將在'test1選擇第一個div。

Answer 2

您可以使用:first-of-type或:nth-of-type(1) ：

#test1 div:first-of-type{
    color:red;
}