所以基本上我让 .round 失去了它的 margin-left 属性与 first-of-type 选择器。有趣的是，last-of-type 选择器工作正常。 我做错了什么？
<div id="box">
<div id="headline">One big headline</div>
<div class="round">Button 1</div>
<div class="round">Button 2</div>
</div>
#headline {
display: block;
width: 90%;
margin-left: 5%;
margin-right: 5%;
top: 50%;
line-height: 1.2em;
font-size: 3.0em;
font-weight: 800;
text-align: center;
text-transform: uppercase;
color: #333;
}
.round {
display: inline-block;
background: #15D43C;
width: auto;
height: 40px;
border-radius: 20px;
padding-left: 2em;
padding-right: 2em;
text-align: center;
font-size: 0.75em;
font-weight: 700;
text-transform: uppercase;
line-height: 40px;
vertical-align: baseline;
color: #fff;
margin-left: 1em;
margin-top: 1em;
}
.round:first-of-type {
margin-left: 5em;
}
最佳答案
:first-of-type 并不像您想象的那样工作。
.round 的类型是div。因为第一个 .round 不是它的第一个类型(它是父级中的第二个 div)，所以您的选择器没有选择任何内容。
.round:nth-child(2) 适用于此特定示例
关于html - 伪选择器首创不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24855024/