html - 连续第 4 个子元素的单独 css

Question

我想为一行中的每个第 4 个元素设置一个单独的样式。我的 html 结构是这样的

<main>
   <div class="a">
     <div class="container"></div>
   </div>
   <div class="a">
     <div class="container"></div>
   </div>
   <div class="a">
     <div class="container"></div>
   </div>
   <div class="a">
     <div class="container"></div>
   </div>
</main>

css是

 .container:nth-child(4n) {
        left: -2rem !important;
    }

所以它不会反射(reflect)第 4 个元素。

非常感谢任何帮助。提前致谢。

Answer 1

鉴于您提供的标记，您的选择器将永远不会匹配您的任何元素，因为每个 .a 父元素中只有一个子 .container 元素。您要选择的是每第 4 个 .a 父元素的 .container 子元素，如下所示:

.a:nth-child(4n)>.container{
    left:-2rem;
}

请注意，以上内容等同于:

main>div:nth-child(4n)>.container{
    left:-2rem;
}

---

如果您询问 left 属性没有应用于该元素，那是因为您还需要给它一个 position。在这种情况下，relative 可能最适合您的需求。

.a:nth-child(4n)>.container{
    left:-2rem;
    position:relative;
}

或者，您也可以使用 translatex transform 函数通过单个属性实现上述功能(尽管 transform 仍然需要 some prefixing ] .

.a:nth-child(4n)>.container{
    transform:translatex(-2em);
}