如何选择带有列表项的偶数行 [英] How to select even rows with list items

问题描述

我的布局如下:

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%;
  }
}

无论媒体查询断点是什么，只在第二行添加边框，我都只需选择偶数行.

I need to select only even rows, no matter the media query break points to add a border to only the 2nd row.

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

这可能与CSS以及JavaScript(jQuery)有关吗?

Is this possible to do with CSS and perhaps JavaScript (jQuery)?

我尝试利用以下CSS规则手动选择第二行，但是最好以某种方式使用JavaScript自动完成第二行，并且最好同时选择所有其他偶数行.

I tried utilizing the following CSS rule to manually select the 2nd row, however it would best to have this be done automatically with JavaScript, somehow, and ideally select all the other even rows as well.

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

推荐答案

由于使用了SCSS，因此可以使用循环来生成:nth-​​child(xn + x)选择器:

Since you use SCSS , you can use a loop to generate your :nth-child(xn+x) selectors :https://codepen.io/anon/pen/VWpQbY?editors=1100

li {
  width: 12%;

  @for $i from 1 through 8 {
    &:nth-child(16n + #{$i}) {
      background: red;
    }
  }

  @media (max-width: 720px) {
    width: 16%;
    &:nth-child(1n) {
      background: none;/* reset previous rule */
    }

    @for $i from 1 through 6 {
      &:nth-child(12n + #{$i}) {
        background: red;
      }
    }
  }
  @media (max-width: 480px) {
    width: 22%;
    &:nth-child(1n) {
      background: none;/* reset previous rule */
    }

    @for $i from 1 through 4 {
      &:nth-child(8n + #{$i}) {
        background: red;
      }
    }
  }
}

这篇关于如何选择带有列表项的偶数行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！