2010-06-22 47 views
4

对,所以这很奇怪。此代码按预期工作::最后一个孩子的问题,当一个部分后面添加页脚

HTML:

<section> 
    Section #1 
</section> 

<section> 
    Section #2 
</section> 

<section> 
    Section #3 
</section> 

CSS:

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

前两节得到30像素的权利保证金,而第三部分没有得到一个右页边距。

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

有没有人有线索为什么这是,以及如何修复?

回答

5

:last-child意味着最后一个孩子,它对选择器的其余部分没有影响,它是一个独立的限制。这意味着它必须是最后一个孩子,不管元素类型或类别等等,它都是最后一个子元素,它们是。由于您的页脚在此之后,因此没有匹配元素均为 a <section> a :last-child

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

+0

啊,这是总的感觉!非常感谢。 – Erik 2010-06-23 00:00:05

+0

@Erik - 欢迎:) – 2010-06-23 00:02:13

+0

谢谢,我假设和Erik一样! – theorise 2010-06-28 12:19:38