Question

所以我正在研究一个tumblr主题设计，每个帖子都应该有一个包装容器（.posts-wrapper），它有66px的底部填充，1px底部边框和84px的底部边距，然后是一些页面导航在底部。我想删除页面最后一个帖子上的边距和分隔符，因此导航和最后一篇文章之间没有任何内容，但出于某种原因我的css没有应用。

    .index-wrapper {
    background-color: #ffffff;
    min-height: 600px;
}


.posts-wrapper {
    margin: 0 auto;
    margin-bottom: 84px;
    padding-bottom: 66px;
    border-bottom: 1px solid;
}

.posts-wrapper:last-child {
    margin-bottom: 0px !important;
    padding-bottom: 66px  !important;
    border-bottom: 0px solid  !important;
}

.index-post {
    max-width: 960px;
    margin: 0 auto;
    padding:0 50px;
    position:relative;
}

以下是我在Dropbox上正在进行的工作的参考链接：http://dl.dropboxusercontent.com/u/35202847/writersblock_theme/index.html

也许我很傻，忘了简单的事情。任何见解将不胜感激

Answer 1

您的问题是，您拥有的最后一个.posts-wrapper div不是其父级的最后一个子级。你有<nav>元素作为兄弟姐妹。

由于您已经在使用CSS3选择器，因此您可以尝试使用:last-of-type伪选择器来获取最后一个.posts-wrapper元素。

.posts-wrapper:last-of-type {
  margin-bottom:0;
  padding-bottom:66px;
  border-bottom:0;
}

无法让“：last-child”选择器处理我的布局。我错过了什么？

1 个答案: