在 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 文章。

我希望这能解决一些问题：:)