html - nth-child 和 nth-of-type 包括其他 div

Question

我正在创建一个新闻版 block ，其中大部分帖子都较小且成对出现 - 您会在我制作的 fiddle 中看到 - 而有些(取决于它们的日期)较大并占据了整个宽度.

我的主要问题是大帖子似乎干扰了边界(边界应该在顶部和底部，其中一个在中间。

看例子:

http://jsfiddle.net/r9tLh/

*编辑*

我也刚刚意识到，如果一个小帖子后面跟着一个大帖子，那么下一个帖子将位于错误的一侧，以便选择器进行正确的样式设置，所以即使我修复了第 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 无法做到这一点。