ヘジの人々、
私は CSS と :nth-child および :not セレクターにこだわっています。
状況:
下に結果が表示される検索フィールドがあります。サイトに入ると、すべての結果がすでに表示されています。各 2 番目の結果行を読みやすくするために、強調表示の色が解除されます:nth-child(odd)
目標:
ユーザーが検索バーに値を入力すると、すべての無効な行を非表示にします (削除しないでください!)。class を追加することで、かなりうまく機能し__inivisibleます。display属性を に設定するだけnoneです。
問題:
クラスを追加した後__invisible、:nth-childセレクターが期待どおりに機能しません。これをセレクターと組み合わせて、:not(.__invisible)無関係で目に見えない結果をすべて除外しました。したがって、彼はまだそれらを数えています。
少しわかりにくいかもしれませんが、jsfiddle の例を次に示します: http://jsfiddle.net/SHGp2/3/
奇数か偶数かを決定する必要があるのは、ピンク色の 2 行のみであるため、1 行をピンク、もう 1 行を青にする必要があります。
何について話しているのか理解できない場合は、__invisibleクラスのコメントを無効にしてください。ピンクとブルーが 1 つずつではなく、ピンクの 2 つの行が表示されます。
:nth-childセレクターの機能が間違っているのかもしれません。もしそうなら、純粋な CSS で動作させる方法はありますか?
前もって感謝します！:)
PS このフィドルには JS がありません ;)