Question

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

我正在尝试将 first-of-type 选择器应用于一组div和p标签，并发现它们对每个标签的行为都不同。它仅选择。标记的 .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>

InputStream inputStream = ftpClient.retrieveFileStream(

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

1 个答案: