html - Css3セレクターが正しく機能しない

Question

私は簡単な作業だと思ったことをやろうとしていますが、それほど単純ではありませんでした...手元にある問題はこの2つのリンクで見ることができます

使用するセレクターはかなり単純です

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

それは、フロントページ（最初のリンク）で一方向に機能し、カテゴリページ（2番目のリンク）で別の方法で機能するということです。これは、セレクターに正しく従う場合に必要なヘッダー要素をカウントするためです...ここに何か足りないものはありますか？

すべての助けに感謝します... 事前にthx

score 2 · Accepted Answer

カテゴリページにh1、の最初の子があり#contentます。これは、子の順序を妨げているため、最初の子は最初div.postの子ではなく、実際には2番目の子になります（仕様を参照）。

:nth-of-type()代わりに使用divして、（クラスを持つ.post）sのみが考慮されるようにすることができます。

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

または、HTMLを別の場所に移動するか、要素のh1周囲に別のコンテナを追加して、順序が乱れないようにすることで、代わりにHTMLを変更することもできます。div.post:nth-child()

1 に答える 1