我的HTML中有一个带有四个<div>
标签的部分。我想用CSS选择最后一个并应用margin-top
,但显然伪类last-of-type
无法正常工作。 nth-of-type
也是如此。为什么会这样?我的代码如下:
HTML
<section id="lastsection">
<div>
<h2>Design Heading</h2>
<p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>
</div>
<div>
<h2>Design Trends</h2>
<p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>
</div>
<div>
<h2>Design Users</h2>
<p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>
<a href="#">Get Started</a>
</div>
<div>
<h2>Design Goals</h2>
<p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>
<a href="#">Buy Now</a>
</div>
</section>
CSS
#lastsection a{
float: right;
}
#lastsection div:last-of-type{
margin-top: 50px;
}
当clear属性生效以将元素移动到浮动元素的下边缘下方时,将忽略(覆盖)上边距。
要建议替代方案,请告诉我们您为什么要为该元素提供不同的上边距。