Css3 选择器无法正常工作

Question

我正在尝试做一些我认为很简单的任务，但它并不是那么简单...... 手头的问题可以在这 2 个链接上看到

http://kurdaktuellt.se/

http://kurdaktuellt.se/category/aktuellt/

我使用的选择器比较简单

body:not(.single) #content > .post:nth-child(odd){
}
body:not(.single) #content > .post:nth-child(even){
}

问题是它在首页（第一个链接）上以一种方式工作，在类别页面（第二个链接）上以另一种方式工作，因为它需要计算标题元素，如果它正确地跟随我的选择器，它不应该... 我这里有什么遗漏吗？

感谢所有的帮助... aloot！ 提前谢谢

Answer 1

在您的类别页面中，您有一个h1 作为#content 的第一个孩子，这会干扰您孩子的排序，导致您的第一个div.post 不再是第一个孩子，而是实际上是第二个孩子（见spec）。

您可以改用:nth-of-type()，这样只会考虑您的divs（具有.post 类）：

body:not(.single) #content > div.post:nth-of-type(odd)
body:not(.single) #content > div.post:nth-of-type(even)

或者您可以选择修改您的 HTML，或者通过将 h1 移动到其他位置，或者在您的 div.post 元素周围添加另一个容器，这样您的 :nth-child() 排序就不会被弄乱。