html - CSS nth-of-type 问题

Question

我正在尝试使用 nth-of-type 定位我的 2/3、6/7、10 等元素，但我似乎无法让它正常工作。是否可以使用 nth-of-type 来定位这些元素，或者我会使用 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>