1

理論的に無限のネストされたレベルに対して行の色を交互に実装する最良の方法を探しています。以下は、私がテストしているマークアップと jsFiddle http://jsfiddle.net/DFn82/の例です

nth-child では、交互の色を正しく機能させるのは非常に難しく、各レベルの組み合わせを効果的にハードコーディングする必要があり、css ルールは指数関数的に増加します。

JavaScript を使用して必要な結果を得ることができますが、リストは完全に動的であり、常に追加および削除されます。JavaScript を使用したパフォーマンスの観点からは、オプションのようには見えず、かなり大きな影響を与える可能性があります。

これはIE9+でのみ機能する必要があります

ここに画像の説明を入力

<ul>
    <li>
        <span>Item</span>
    </li>
    <li>
        <span>Item</span>
    </li>
    <li>
        <span>Item</span>
        <ul>
            <li>
                <span>Item</span>
                <ul>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                </ul>
            </li>
            <li>
                <span>Item</span>
                <ul>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                </ul>
            </li>
            <li>
                <span>Item</span>
                <ul>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
4

1 に答える 1

1

このような実装は、css だけでは不可能です。JavaScript を使用する必要があります。また、JS を使用してもパフォーマンスが低下することはありません。新しい値が追加または削除されるたびに、JS をチェックして更新するだけです。次に、行数に線形に依存するパフォーマンスについて話しています。可能であればCSSルールからそれを理解しようとするブラウザーとほとんど違いはありません（行数またはさらに悪いことに線形的に依存します）。

于 2012-12-05T13:00:21.813 に答える