Question

我正在尝试使用nth-of-type定位我的2 / 3,6 / 7,10等元素，但我似乎无法使其正常工作。是否可以使用nth-of类型来定位这些元素，还是使用JS最好地实现它？

ul {overflow:hidden; width:300px;}
ul li {width:150px; float:left;  background:#ff0000;}
ul li:nth-of-type(3n+1){  
  background:#fff;
}

https://codepen.io/liamgallagher/pen/wjGGGP

Answer 1

您可以创建2循环

    ul {overflow:hidden; width:300px;}
    ul li {width:150px; float:left;  background:#ff0000;}
    ul li:nth-of-type(4n+1){
      background:#fff;
    }
    ul li:nth-of-type(4n){
      background:#fff;
    }

<ul>
  <li>WHITE</li>
  <li>RED</li>
  <li>RED</li>
  <li>WHITE</li>
  <li>WHITE</li>
  <li>RED</li>
  <li>RED</li>
  <li>WHITE</li>
  <li>WHITE</li>
  <li>RED</li>
</ul>

Answer 2

您必须为选择器使用2条规则才能实现您的目标。试试这段代码。

ul {overflow:hidden; width:300px;}
ul li {width:150px; float:left;  background:#fff;}
ul li:nth-of-type(4n+2),
ul li:nth-of-type(4n+3) {
  background:#ff0000;
}

Answer 3

如你所愿2，6,10 ...你需要4n（选择每个第4个元素）。然后，对于n = 0，您需要添加+2。 =＆GT; 4n+2
而且，正如你还想要3,7,11 ......你需要+3。

这是两个不同的选择器，您可以在此工作片段中使用它们：
（我添加了CSS计数器以轻松查看li s的数量

ul {overflow:hidden; width:300px;}
ul li {width:150px; float:left;  background:#ff0000;}

ul {
  counter-reset: list;
}

ul>li {
  list-style: none;
  position: relative;
}

ul li:before {
  counter-increment: list;
  content: counter(list);
  position: absolute;
}

ul li:nth-of-type(4n+2),
ul li:nth-of-type(4n+3) {
  background: #ddd;
}

<ul>
  <li>__</li>
  <li>__</li>
  <li>__</li>
  <li>__</li>
  <li>__</li>
  <li>__</li>
  <li>__</li>
  <li>__</li>
  <li>__</li>
  <li>__</li>
  <li>__</li>
  <li>__</li>
  <li>__</li>
  <li>__</li>
  <li>__</li>
  <li>__</li>
</ul>

我希望它有所帮助。

Answer 4

尝试为li元素使用2个单独的css选择器

ul li:nth-of-type(4n+1) {
  background: #fff;
}

ul li:nth-of-type(4n+4) {
  background: #fff;
}

https://codepen.io/anon/pen/vjGGWm

CSS nth-of-type问题

4 个答案: