Html 在另一个div中更改第一个div的颜色，中间有一个h2

我注意到在以下代码中：

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

第一个div（1Lorem…）将显示为红色，但如果我将html更改为：

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

标题
乱数假文
乱数假文

---

第一个div将不再显示为红色。有人能告诉我如何使第一个div（1Lorem…）在保持h2的同时显示为红色吗？我必须将h2保留在那里，我真的需要使用一种方法，将第一个子div更改为红色。

您可以使用

：类型的第一个或
：类型的第n个（1）
：

您可以使用
：类型的第一个
或
：类型（1）的第n个
：

#test1 div:first child
仅选择也是第一个子级的div

#test1div:first of type
将选择
'test1
#test1div:first child
中的第一个div，该div仅选择一个也第一个子div

#test1 div:first of type
将选择
'test1
`#test1 div:first of type````#test1 div:first of type中的第一个div``
<div id="test1">
    <h2>Header</h2>
    <div>Lorem ipsum</div>
    <div>Lorem ipsum</div>
</div>

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