<分区>
标签 html css css-selectors
<分区>
如果这是一个错误或我的理解很差，请向我说明。
我正在尝试将类型优先 选择器应用于一组 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>请看这个 fiddle https://jsfiddle.net/sabarigr/52vu5dks/
最佳答案
那是因为 p with class form__group 不是 first p in form its p with class >表单__消息。你可以在这里看到，如果你删除第一个 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>关于html - 优先选择器不适用于 div 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42020302/