为什么“最后类型”伪类不起作用?

时间:2019-04-20 18:59:52

标签: html css pseudo-class

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

1 个答案:

答案 0 :(得分:0)

当clear属性使将元素移动到浮动元素的底部边缘以下时,顶部边距将被忽略(覆盖)。

要提出替代方案,请告诉我们为什么要为该元素设置不同的顶部边距。