Question

我正在使用~在找到类.is-middle后选择列表项，问题是我的代码似乎没有针对其后的每个列表项，因此nth-child(1), nth-child(2)...没有t注册。任何人都可以解释我可能在哪里出错吗？

SCSS

.ctn {



    li {
        width: 100%;
        height: 50px;
        background: lightgrey;
        border-bottom: 1px solid #eee;

        &.is-middle
         ~ li {

             &:nth-child(1) {
               background: purple;
             }

             &:nth-child(2) {
               background: green;
             }

             &:nth-child(3) {
               background: yellow;
             }
        }
    }
    }

PEN： http://codepen.io/styler/pen/mgfxJ

Answer 1

为什么你不能按照自己的方式使用nth-child：

此选择器基于其父级元素的位置（编号）。因此，定位li.is-middle ~ li:nth-child(1)文字意味着其父级中的第一个li，它位于.is-middle之后，不存在。

解决1：

如果你不介意第一种颜色根据.is-middle的位置而改变，你可以使用这样的:nth-child为下面的兄弟姐妹上色：

li.is-middle ~ li:nth-child(3n) {
    background: purple;
}
li.is-middle ~ li:nth-child(3n+1) {
    background: green;
}
li.is-middle ~ li:nth-child(3n+2) {
    background: yellow;
}

<强> DEMO

解决2：

如果您只想定位以下3个兄弟姐妹，可以像这样使用+选择器：

li.is-middle + li {
    background: purple;
}
.ctn li.is-middle + li + li {
    background: green;
}
.ctn li.is-middle + li + li + li {
    background: yellow;
}

<强> DEMO

尝试定位：使用〜后某个班级的第n个孩子

1 个答案: