first-of-type选择器不适用于div元素

Question

如果这是一个错误或我的理解很差,请澄清我.

我试图将第一个类型的选择器应用于一组div和p标签,并发现每个选择器的行为都不同.它只选择div标签的.form__group类而不是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>