如何將樣式應用於h2之後的第一個div？

Question

我想將第一個div顏色應用爲紅色。其他div作爲默認值。

我試過這個，但沒有工作。下面

<div class="community_team"> 
<h2>Managers</h2> 
<div class="comm_team_item clearfix"> 
First Mangaer 
<div> 
<div class="comm_team_item clearfix"> 
2nd Mangaer 
<div> 
<div class="comm_team_item clearfix"> 
3rd Mangaer 
<div> 
</div> 

Answer 1

.community_team:first-child + div{ 
    color:red; 
} 

實際的HTML使用first-of-type僞選擇。在下面的例子中，這將匹配.community_team的孩子的第一個div元素。

此外您的div元素未關閉。將<div>更改爲</div>即可關閉。

.community_team div:first-of-type { 
 
    color: red; 
 
}

<div class="community_team"> 
 
    <h2>Managers</h2> 
 
    <div class="comm_team_item clearfix"> 
 
    First Mangaer 
 
    </div> 
 
    <div class="comm_team_item clearfix"> 
 
    2nd Mangaer 
 
    </div> 
 
    <div class="comm_team_item clearfix"> 
 
    3rd Mangaer 
 
    </div> 
 
</div>

此外可以使用相鄰的兄弟組合子的h2即內.community-team之後到所述第一目標div。如果您曾經有過div之前的到您的h2的情況，但您仍然希望在之後之後的第一個分區。

.community_team h2 + div { 
 
    color: red; 
 
}

<div class="community_team"> 
 
    <div>This div is prior to the h2</div> 
 
    <h2>Managers</h2> 
 
    <div class="comm_team_item clearfix"> 
 
    First Mangaer 
 
    </div> 
 
    <div class="comm_team_item clearfix"> 
 
    2nd Mangaer 
 
    </div> 
 
    <div class="comm_team_item clearfix"> 
 
    3rd Mangaer 
 
    </div> 
 
</div>