Question

如何简化这些nthchild选择器：

body {
    width:1012px;
}

div {
    width:1em;
    height:1em;
    float:left;
}

div:nth-child(10n+1),
div:nth-child(10n+4),
div:nth-child(10n+5),
div:nth-child(10n+6),
div:nth-child(10n+8) {
    background:#3498db;
    border:1px solid #ecf0f1;
}
div:nth-child(10n+2),
div:nth-child(10n+3),
div:nth-child(10n+7),
div:nth-child(10n+9),
div:nth-child(10n+10) {
    background:#ecf0f1;
    border:1px solid #3498db;
}

的jQuery

for (var i = 0; i < 1000; i++) {
    $('body').prepend('<div></div>');
}

我向身体添加了1000个div元素。如何缩短第n个子选择器？或..我可以使用jquery来替换nthchild选择器吗？任何让它变得可读的东西都会非常好。

提前致谢!!!

Answer 1

您可以随时简化选择器：

http://jsfiddle.net/VK6kE/2/

div {
    width:1em;height:1em;
    float:left;
    background:#ecf0f1;
    border:1px solid #3498db;
}
div:nth-child(10n+1), div:nth-child(10n+4), div:nth-child(10n+5), div:nth-child(10n+6), div:nth-child(10n+8) {
    background:#3498db;
    border:1px solid #ecf0f1;
}
body {width:1012px;}

我做的是：

将white-ish样式设为默认
让其他人覆盖此风格

这样，您可以在不增加代码的情况下消除5个选择器。

另外，由评论（nicolallias）中的其他用户发布，并根据OP请求，我还将添加缩短它的方式，使用更多的javascript代码：

for(var i = 0; i < 1000; i++){
    switch(i%10){
        case 1:
        case 4:
        case 5:
        case 6:
        case 8:
            $('body').prepend('<div class="one"></div>'); break;
        case 2:
        case 3:
        case 7:
        case 9:
        case 0:
            $('body').prepend('<div class="two"></div>'); break;
    }
}

.one {
    background:#3498db;
    border:1px solid #ecf0f1;
}
.two {
    background:#ecf0f1;
    border:1px solid #3498db;
}

如何简化这些n-child选择器？可能的模式？

1 个答案: