Question

所以基本上我让.round使用第一个类型的选择器丢失其margin-left属性。有趣的是，最后一个类型的选择器工作得很好。我做错了什么？

<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;
}

Answer 1

type 是元素类型，而不是匹配选择器结果的东西。

div类型的#box类型的第一个元素不是类.round的成员，因此.round和{{1}都不匹配}}

Answer 2

:first-of-type不符合你的想法。

.round的类型为div。因为第一个.round不是它的第一个类型（它是父级中的第二个div），所以您的选择器不会选择任何内容。

.round:nth-child(2)适用于此特定示例

Answer 3

JSFiddle在这里使用:nth-child()。如果可能的话，我会阻止使用它，除非你的意图不同。

<强> JSFiddle Demo

这是一篇很好的文章供您阅读CSS特异性。不使用伪选择器进行定位，而是使用类来修改该特定元素。

PS，您top: 50%上不需要#heading，除非定位固定，相对或绝对，否则没有任何意义。

Hacks for dealing with CSS specificity

伪选择器first-of-type不起作用

3 个答案: