在CSS3中使用第n个孩子

Question

我想从第一个元素中选择每组三个元素

示例：

<ul>
    <li>1</li> <!-- This one -->
    <li>2</li> <!-- This one -->
    <li>3</li> <!-- This one -->
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li> <!-- This one -->
    <li>8</li> <!-- This one -->
    <li>9</li> <!-- This one -->
    <li>10</li>
</ul>

所以我必须添加背景1 1,2,3; 7,8,9; 13,14,15等 我的总金额不是<li>

是否有仅使用nth-child（）的解决方案？

Answer 1

是的，显然有一个使用nth-child的解决方案。

li:nth-child(6n+1),
li:nth-child(6n+2),
li:nth-child(6n+3){
  color: blue;
  background-color: red;
}

基本上'nth-child'所做的就是为你制作一种配方。只需用您想要的任何数字替换“n”，以检查它将起作用的孩子。