Question

我正在创建一个新闻栏目，其中大部分帖子都较小且成对 - 你会看到我做的小提琴 - 而一些（取决于他们的日期）更大并占据整个宽度

我的主要问题是大型帖子似乎在干扰边界（应该是在顶部和底部，一个在中心位置。

参见示例：

*的修改 *

我也刚刚意识到如果自己有一个小帖子后跟一个大帖子，那么下一篇文章就会出错，让选择器做正确的样式，所以即使我修复了第n个选择器仍然可能发生错误。有没有其他方法可以做到这一点，比如奇数和偶数选择器在一个大帖子后重新开始？

.blogPost:nth-of-type(odd) {
    border-left: 0;
    padding-right: 0;
}
.blogPost:nth-of-type(even) {
    padding-left: 0;
    border-right: 1px solid #4E4E4E;
}

Answer 1

我通过使用javascript专门按类抓取来解决我当前的问题：

$(function() {
$('.blogPost:odd').css({
                'border-left': '0',
                'padding-right': '0'
});
$('.blogPost:even').css({
                'border-right': '1px solid #4E4E4E',
                'padding-left': '0'
});
});

然而我上面提到的问题 - 如果在一个大帖子之前只有一个小帖子，下面的小帖子会遇到同样的问题。如果我无法解决，我可能会提出一个新的问题。

感谢您的帮助，让我意识到我不能只使用CSS。

nth-child和nth-of-type包含其他div

1 个答案: