CSS中是否存在:nth-child选择器的重置方案？有没有更优实现方式？

你现有的方案需要手动覆盖不同断点下的:nth-child规则，维护成本很高，有两种更简单的实现方式可以完全规避规则重置的问题：

方案1：Flexbox/Grid + gap属性（推荐，兼容性满足绝大多数场景） #

直接给父容器设置gap属性定义行列间距，不需要给子元素设置任何 margin 相关的:nth-child规则，适配不同断点时只要修改子元素宽度即可：

/* 父容器样式 */
.list-container {
  display: flex;
  flex-wrap: wrap;
  /* 第一个值是行间距，对应你原来的margin-top:5px，第二个值是列间距15px */
  gap: 5px 15px;
}

/* 子元素样式 */
.example {
  padding: 12px 6px;
  /* 移动端每行2个 */
  width: calc((100% - 15px) / 2);
  background-color: blue;

  @media (min-width: 768px) {
    /* 平板端每行3个 */
    width: calc((100% - 30px) / 3);
    background-color: red;
  }

  @media (min-width: 1024px) {
    /* 桌面端每行6个 */
    width: calc((100% - 75px) / 6);
    background-color: green;
  }
}

这个方案的优势是代码量少、逻辑清晰，不会出现多断点下规则冲突的问题，目前除了IE浏览器外所有主流浏览器都支持gap属性。

方案2：负margin兼容方案（兼容不支持gap的老旧浏览器） #

如果需要兼容IE等老旧浏览器，可以用父容器负margin吃掉首元素左边距的方案，同样不需要写:nth-child规则：

/* 最外层容器，用来裁剪溢出的负margin */
.list-wrapper {
  overflow: hidden;
}
/* flex父容器 */
.list-container {
  display: flex;
  flex-wrap: wrap;
  /* 吃掉首元素的左边距 */
  margin-left: -15px;
}
/* 子元素样式 */
.example {
  padding: 12px 6px;
  margin-left: 15px;
  margin-top: 5px;
  /* 移动端每行2个 */
  width: calc((100% - 30px) / 2);
  background-color: blue;

  @media (min-width: 768px) {
    /* 平板端每行3个 */
    width: calc((100% - 45px) / 3);
    background-color: red;
  }

  @media (min-width: 1024px) {
    /* 桌面端每行6个 */
    width: calc((100% - 90px) / 6);
    background-color: green;
  }
}

内容的提问来源于stack exchange，提问作者Nolan