改变另一个div中第一个div的颜色，其间有h2

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

<强> jsFiddle example