javascript - 如何选择带有列表项的偶数行

Question

我有以下带有无序列表的布局:

https://codepen.io/barkins/pen/qjrpKJ

ul{
  max-width:1200px;
  list-style:none;
  margin:0 auto;
  padding:0;
  display:flex;
  flex-wrap:wrap;
}
li{
  width:12%;
  @media (max-width:720px){
    width:16%;
  }
  @media (max-width:480px){
    width:22%;
  }
}

我只需要选择偶数行，无论媒体查询断点如何只为第二行添加边框。

.second-row-items{
  border:1px solid red;
}

这可能与 CSS 和 JavaScript (jQuery) 相关吗？

---

我尝试使用以下 CSS 规则手动选择第二行，但最好使用 JavaScript 以某种方式自动完成此操作，并且理想情况下也选择所有其他偶数行。

&:nth-child(n+9):nth-child(-n+16){
     border:1px solid red; 
  }

Answer 1

如果您只想选择第二行，那应该可以完成工作:

@media (max-width:480px)
{
  li:nth-child(5),
  li:nth-child(6),
  li:nth-child(7),
  li:nth-child(8)
  {
    background-color: red;
  }
}
@media (min-width:481px) and (max-width:720px)
{
  li:nth-child(7),
  li:nth-child(8),
  li:nth-child(9),
  li:nth-child(10),
  li:nth-child(11),
  li:nth-child(12)
  {
    background-color: red;
  }
}
@media (min-width:721px)
{
  li:nth-child(9),
  li:nth-child(10),
  li:nth-child(11),
  li:nth-child(12),
  li:nth-child(13),
  li:nth-child(14),
  li:nth-child(15),
  li:nth-child(16)
  {
    background-color: red;
  }  
}

如果你想要所有偶数行，那么使用:

@media (max-width:480px)
{
  li:nth-child(8n-3),
  li:nth-child(8n-2),
  li:nth-child(8n-1),
  li:nth-child(8n)
  {
    background-color: red;
  }
}
@media (min-width:481px) and (max-width:720px)
{
  li:nth-child(12n-5),
  li:nth-child(12n-4),
  li:nth-child(12n-3),
  li:nth-child(12n-2),
  li:nth-child(12n-1),
  li:nth-child(12n)
  {
    background-color: red;
  }
}
@media (min-width:721px)
{
  li:nth-child(16n-7),
  li:nth-child(16n-6),
  li:nth-child(16n-5),
  li:nth-child(16n-4),
  li:nth-child(16n-3),
  li:nth-child(16n-2),
  li:nth-child(16n-1),
  li:nth-child(16n),
  {
    background-color: red;
  }  
}