CSS 3選擇器不工作proberly

我試圖做一些什麼，我認爲將是一個簡單的任務，但它不是說很簡單... 手頭的問題都可以在這2個鏈接看到CSS 3選擇器不工作proberly

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

選擇即時通訊使用

是相當簡單

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

的事情是，它的工作1瓦特唉在頭版（第一個鏈接）和另一種方式在類別頁面（第二個鏈接），這是因爲它需要計算頭元素，它不應該如果它會按照我的選擇器正確... 有沒有什麼我在這裏失蹤？

所有幫助表示讚賞... aloot！ THX提前

來源

2012-07-16 Breezer

在您的類別頁面你有一個h1作爲#content的第一個孩子，這是你的孩子的排序干擾，造成你的第一個div.post不再是第一個孩子，但真正的第二個孩子（見spec）。

您可以使用:nth-of-type()代替只有你div S（它們具有類.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元素周圍添加另一個容器，以便您的排序不會混亂。

來源

2012-07-16 16:22:39 BoltClock

沒有必要將div標籤添加到選擇器，這是很好的，因爲它可能是一些其他元素以及...怪異的我一直認爲，nth孩子只會從設置規則計數。在這種情況下發布......你知道任何一個很好的網站，探索爲什麼這樣做的原因是什麼？ Thx爲答案btw節省了我很多時間:) – Breezer 2012-07-16 16:27:18

@Breezer：爲什麼我添加'div'到選擇器是因爲'：nth-of-type（）'不看類，它看起來標籤名稱，我想說清楚。如果你問的是「爲什麼」：nth-child（）'以這種方式行爲「，部分原因是由於僞類的工作原理以及如何設計'：nth-child（）'。雖然我記不起任何好的鏈接，但我想你可以看看[我的一些其他答案]（http://stackoverflow.com/search?q=user%3A106224+nth-兒童）... – BoltClock 2012-07-16 16:34:20

CSS 3選擇器不工作proberly

回答

相關問題