:在节后添加页脚时的最后一个子问题

Question

对,所以这很奇怪.此代码按预期工作:

HTML:

<section>
    Section #1
</section>

<section>
    Section #2
</section>

<section>
    Section #3
</section>

CSS:

section{
    margin-right: 30px;
}
section:last-child{
    margin-right: 0;
}

前两个部分获得30px的右边距,而第三部分没有获得正确的边距.

现在,如果我在最后一节之后添加一个页脚元素,则会忽略:last-child.这样,所有三个部分都将具有30px的右边距.这在Mozilla和Webkit中都适用.

有没有人知道为什么会这样,以及如何修复它？

Answer 1

:last-child意味着最后一个孩子,它与选择器的其余部分无关,它是一个独立的限制.这意味着它必须是最后一个子节点,无论元素类型或类等等...它实际上是最后一个子元素.由于您的页脚在此之后,因此没有匹配的元素既是 a <section> 又是a :last-child.

这个选择器是:last-of-type,但它没有得到广泛支持.