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 Selectors之后，似乎没有任何css选择器可以遍历嵌套（除了> gt选择器，它只查看父项的直接子项）。

我希望被证明是错误的，因为这可能非常有用。

所以唯一的（css）解决方案就是你已经说过的那个：div > div > div {background: white; } 难道你不能随着div的产生而产生这个吗？

Answer 2

正如其他人所说，这在纯CSS中是不可能的。但是使用js很可能也很容易。

为了方便起见，我在jQuery中实现了这个，但你可以用纯JS来实现。

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

我基本上制作了一个小的jQuery插件，用你的主要颜色对你应用它的选择器进行着色，然后使用子选择来匹配一个匹配的子颜色和二次颜色，依此类推，直到没有与子选择匹配的子项为止。

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。我对示波器更加舒适，因此我将功能修改为更简单。

apply有用的唯一情况是需要将值传递给函数范围内的this变量。除非在课程中工作，否则您应该需要apply或call。如果您想阅读它，我想推荐您this answer which explains it in context of classes。 The MDN link也是一个很好的资源（对于这个和其他javascript构造/概念）。

至于modulo，这是基本数学和this question explains the operation quite well。简而言之，它会在将数字除以另一个数字后给出完整的整数余数。所以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的余数，并使用该整数作为colors数组的索引，该数组返回一个颜色供使用。

++仅在返回i的值后才添加1以便在模数中使用，如果我写了++i，这种行为将会被颠倒，但这不起作用为了我们的目的。

供参考here is the MDN article on do...while。

我希望清除一些东西！：）

CSS中是否可以使用备用嵌套样式？

2 个答案: