第一種類型的選擇器不適用於div元素

Question

澄清我是否這是一個錯誤或者我的理解很差。

我想申請第一個選擇器到一組div和p標籤，並發現它們對每一個行爲不同。它選擇只有.form__group類DIV標籤，而不是p標籤

/* css */ 
 

 
.form__group:first-of-type { 
 
    background: red; 
 
} 
 
.form__group:first-of-type span { 
 
    font-weight: bold; 
 
}

<!-- form__group class for p tag --> 
 

 
<form class="form"> 
 
    <p class="form__message">test</p> 
 
    <p class="form__group"> 
 
    <span>The first paragraph.</span> 
 
    </p> 
 
    <p class="form__group">The second paragraph.</p> 
 
</form> 
 

 
<!-- form__group class for div tag --> 
 
<form class="form"> 
 
    <p class="form__message">test</p> 
 
    <div class="form__group"> 
 
    <span>The fourth paragraph.</span> 
 
    </div> 
 
    <div class="form__group">The fifth paragraph.</div> 
 
</form>

請看看這個小提琴https://jsfiddle.net/sabarigr/52vu5dks/

Answer 1

這是因爲p與form__group類首先是p，其形式爲p，其類別爲form__message。你可以在這裏看到的是，如果你刪除第一p.form__message將選擇p.form__group，因爲這是類型p

.form__group:first-of-type { 
 
    background: red; 
 
} 
 

 
.form__group:first-of-type span { 
 
    font-weight: bold; 
 
}

<!-- form__group class for p tag --> 
 
<form class="form"> 
 
    <p class="form__group"><span>The first paragraph.</span></p> 
 
    <p class="form__group">The second paragraph.</p> 
 
</form> 
 

 
<!-- form__group class for div tag --> 
 
<form class="form"> 
 
    <p class="form__message">test</p> 
 
    <div class="form__group"><span>The fourth paragraph.</span></div> 
 
    <div class="form__group">The fifth paragraph.</div> 
 
</form>