在 CSS 中是否可以交替嵌套 styles？

Question

我正在做一個小實驗，嘗試為嵌套的 div 替換背景顏色。

這是我打算實現的（沒有內聯樣式）：

<div style="background: #fff;">
    <div style="background: #000;">
        <div style="background: #fff;">
            <div style="background: #000;">
                and so on...
            </div>
        </div>
    </div>
</div>

我覺得我一定錯過了一些明顯的東西！ 我試過div:nth-of-type(2n)但這似乎只適用於一個級別。

這是針對生成 div 的實驗，因此解決方案需要無窮無盡（不是類似於 div div div div = white 的東西）。 我知道使用 JavaScript 非常簡單，只需尋找一個純粹的 CSS 解決方案。

Answer 1

正如 Lister 先生指出的那樣，第 nth-of-type 在一個級別上工作（所選 div 的父級別）。

據我所知，在查看W3C CSS3 選擇器后，似乎沒有任何 css 選擇器用於遍歷嵌套（> 選擇器除外，它只查看父項的直接子項）。

我很樂意被證明是錯誤的，因為這可能非常有用。

所以唯一的（css）解決方案就是你已經說過的那個： div > div > div {background: white; } div > div > div {background: white; }你不能在生成 div 的同時生成它嗎？

Answer 2

正如其他人所說，這在純 CSS 中是不可能的。但是使用 js 是完全可能的，也相當容易。

為方便起見，我在 jQuery 中實現了它，但您可以使用純 JS 來實現。

http://jsfiddle.net/sg3s/Suf3p/

我基本上制作了一個小的 jQuery 插件，colors 是您將其應用到主色的選擇器，並使用子選擇讓匹配的子級使用次級色着色，依此類推，直到沒有子級匹配的子級留下。

jQuery(function($) {
    $.fn.alternateNestedBgColor = function(subselect, colors) {
        // While not a great optimization, length of the colors array always stays the same
        var l = colors.length;

        // Itterate over all element in possible array
        // jQuery best practice to handle initializing multiple elements at once
        return this.each(function() {
            var $sub = $(this), i = 0; 

            // Executes code, at least once
            do {

                // Set bg color for current $sub element
                $sub.css('backgroundColor', colors[i++ % l]);
                // Set $sub to direct children matching given selector
                $sub = $sub.children(subselect);

            // Will repeat the do section if the condition returns true
            } while ($sub.length > 0);
        });
    };

    // target first div in the body
    // first argument = child selector
    // second argument = array list of colors
    $('body>div').alternateNestedBgColor('div', ['red', 'green', 'blue', 'purple', 'grey']);
});

更新按要求更新，詳細說明如何apply和modulo 。

自從我最近發布這篇文章以來已經快 2 年了。 在工作時，我當時制定的解決方案有點冗長和混亂，例如，我從來不需要apply 。 我對范圍更熟悉了一點，所以我修改了 function 以使其更簡單。

apply唯一有用的情況是當您需要將值傳遞給 function scope 中的this變量時。除非使用類，否則沒有很多情況您應該需要apply或call 。 如果你想繼續閱讀它，我想推薦你參考這個答案，它在類的上下文中解釋了它。 MDN 鏈接也是一個很好的資源（對於這個和其他 javascript 構造/概念）。

至於modulo ，這是基礎數學， 這個問題很好地解釋了操作。 簡而言之，它將一個數字除以另一個數字后得到完整的 integer 余數。 所以33 % 8 = 1你可以在 js 中寫成33-parseInt(33/8)*8雖然那會非常低效。 操作的結果將始終為 0（當數字完全除以）到第二個參數減去 1（在我的示例中為 7）。

0 % 3 = 0 // technically doesn't exist (as you can't divide 0 with anything) but 0 for practicality in all programming languages afaik(?)
1 % 3 = 1
2 % 3 = 2
3 % 3 = 0
4 % 3 = 1
5 % 3 = 2
6 % 3 = 0 etc...

這是對您的 CPU 來說本質上很簡單的操作之一，事實上，如果沒有它能夠做到這一點，我們就不會有計算機。

在 javascript 修訂版中，我將給定數組中的顏色選擇寫為colors[i++ % l] 。

在寫作時，這將給我i / l的其余部分，並使用 integer 作為返回顏色以供使用的colors數組的索引。

++只有在返回用於模數的i的值后才會加 1，如果我寫了++i ，這種行為將被逆轉，但這對我們這里的目的不起作用。

這里的參考是關於 do...while 的 MDN 文章。

我希望這能解決一些問題：:)