如何将样式应用于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>