Question

我试图找出一个nth-child选择规则，它将选择＆＃34;余数＆＃34;分三。这里解释的是一个可视化图表。

编辑：提供更多清晰的例子。

div1
(should select div1)

div1     div2
(should select div1 and div2)

div1     div2     div3
(should select nothing)

div1     div2     div3    div4
(should select div4)

div1     div2     div3    div4    div5
(should select div4 and div5)

div1     div2     div3     div4     div5     div6
(should not select anything)

div1     div2     div3     div4     div5     div6     div7
(should select div7)

等...

我相信这可能是可能的，但我无法弄清楚。

Answer 1

:nth-child() :nth-last-child()，general sibling selector (~)可以合并，以匹配最后一组3之后的元素。

div:nth-child(3n):nth-last-child(-n+3) ~ div {
    /* ... */
}

http://jsfiddle.net/akzzM/

使用7个div的第3个例子：

nth-child(3n)每隔3 <div>匹配一次，匹配3和6。
nth-last-child(-n+3)与最后3位兄弟姐妹相匹配 - 匹配5，6和7。
合并后，他们只匹配最后一个3的间隔 - 匹配6。

然后~ div匹配后面的任何兄弟（7）。

如果没有第3名，则匹配第1名和第2名，如果是:first-child，则可以匹配最后2名中的:last-child，如果是div:nth-child(3n):nth-last-child(-n+3) ~ div, div:first-child:nth-last-child(-n+2), div:last-child:nth-child(-n+2) { /* ... */ }，则可以匹配{{1}}。 s之二：

{{1}}

http://jsfiddle.net/JEST3/

Answer 2

据我所知，没有一个选择器可以让你这样做。

然而，nth-last-child和nth-child上方的组合可以帮助您实现这一目标。

<强> CSS

li:nth-last-child(-n+2) {color:red;}

li:nth-child(3n) {color:black;}

li:nth-child(1),
li:nth-child(2),
li:nth-child(3) {color:black;}

Jsfiddle Demo

Answer 3

这可以解决您的问题：

div:not(:nth-child(3n)):not(:nth-child(1)):not(:nth-child(2)) {
    background-color: #38f;
}

Answer 4

我相信我已经解决了它让我满意，尽管必须编写两个不同的CSS分组。诀窍是你可以在同一行中使用多个选择器，这相当于在集合选择之间建立联盟。

http://jsfiddle.net/MY4cD/

的工作示例

一个更完整的解决方案（除了三个以外，还可扩展到其他倍数。

给出以下HTML（以及任何数量的）

<div class="container">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
    <div class="cell">7</div>
    <div class="cell">8</div>
</div>

以下CSS会创建三行，“余数”div显示为红色。

    .cell {
        width: 33.33%;
    }

    .cell:nth-last-child(-n+2):nth-child(3n+1):nth-last-child(1){
        background:red;
    }

    .cell:nth-last-child(-n+2):nth-child(3n+1):nth-last-child(2){
        background:red;
    }

    .cell:nth-last-child(-n+2):nth-child(3n+2):nth-last-child(1){
        background:red;
    }

如果您希望每行有4个div并再次选择余数，则可以使用以下CSS

    .cell {
        width: 25%;
    }

    /* accounts for when there is 1 remainder */
    .cell:nth-last-child(-n+3):nth-child(4n+1):nth-last-child(1){
        background:red;
    }

    /* accounts for the first of 2 remainders */         
    .cell:nth-last-child(-n+3):nth-child(4n+1):nth-last-child(2){
        background:red;
    }

    /* accounts for the second of 2 remainders */
    .cell:nth-last-child(-n+3):nth-child(4n+2):nth-last-child(1){
        background:red;
    }

    /* accounts for the first of 3 remaidners */
    .cell:nth-last-child(-n+3):nth-child(4n+1):nth-last-child(3){
        background:red;
    }

    /* accounts for the second of 3 remainders */
    .cell:nth-last-child(-n+3):nth-child(4n+2):nth-last-child(2){
        background:red;
    }

    /* accounts for the third of 3 remainders */
    .cell:nth-last-child(-n+3):nth-child(4n+3):nth-last-child(1){
        background:red;
    }

通过这种方式，您可以看到模式越高越复杂，但任何数字肯定都可以。

我已经使用这个模式和媒体查询来模拟新的CSS flex-flow的效果：row wrap;使用浮动的命令用于跨浏览器兼容性。您可以在此处查看完整演示：http://codepen.io/msorrentino/full/chHnu/

先进的n-child选择

4 个答案: