獲得第ñ類型不針對兒童的孩子？

Question

我正在嘗試使用CSS first-of-type屬性來定位<div>中的一個<h1>元素，但我注意到這不僅僅針對此<div>的第一個子類型爲<h1>，但它還針對的是兒童的子女是類型<h1>，這對我來說似乎不太有用。有什麼方法可以排除兒童的孩子嗎？

在下面的例子中，我有一個<h1>這是一個<div>的直接孩子，被稱爲#everything。我嘗試在CSS中針對該<h1>，但這會導致在子女<div>內同時針對正確的<h1>以及另一個<h1>。

#everything h1:first-of-type{ 
 
    color: red; 
 
}

<div id="everything"> 
 
    <h1>hello</h1> 
 
    <div id="something"> 
 
     <h1>goodbye</h1> 
 
    </div> 
 
</div>

Answer 1

這是你想要的嗎？

#everything>h1:first-of-type{ 
 
    color: red; 
 
}

<div id="everything"> 
 
    <h1>hello</h1> 
 
    <div id="something"> 
 
     <h1>goodbye</h1> 
 
    </div> 
 
</div>

Answer 2

更新與此你的CSS代碼。

#everything > h1{ 
    color: red; 
} 

還有一個選項：

#everything:first-child > h1 { 
    color: red; 
} 

對於此選項#everything：第一胎你需要指定孩子H1或它的類/ ID。