javascript - 在所有屏幕宽度上应用第 n 个 child

Question

目前我有以下用于 react 组件的 css

export default styled.div

  @media (min-width: getEmFromPx(400)) {
  margin: ...
  width: ...

  :nth-child($2n+2) {
    margin-right: 0px;
  }
  }

  @media (min-width: getEmFromPx(700)) {
  margin: ...
  width: ...

  :nth-child($3n+3) {
    margin-right: 0px;
  }
  }

  @media (min-width: getEmFromPx(1000)) {
  margin: ...
  width: ...

  :nth-child($3n+3) {
    margin-right: 0px;
  }
  }

我正在设置 div 中的哪个元素应用 margin-right 0px 而另一个元素有边距。这在小屏幕尺寸上完美运行，但对于中型和大型屏幕，似乎存在第 n 个小选择器并覆盖中型和大型屏幕中的第 n 个选择器……有没有办法克服这个问题？

在 chrome 开发者工具上，我可以为小屏幕禁用第 n 个子选择器，这使得中等屏幕可以完美运行。据我了解，在不同的媒体屏幕上，选择器会更新？

Answer 1

您的第一个媒体查询 @media (min-width: getEmFromPx(400)) 将应用于所有具有 400px 或大于 400px 的屏幕，因为您使用的是 min-width(就是它应适用于此及以上)。

在你的第二个和第三个媒体查询中你在做同样的事情，所以不需要写两次。此处您将 ​​margin-right: 0 设置为 nth-child(3n+3)，但您必须重置 nth-child(2n+2) 元素，在之前的媒体查询中定义。因为 nth-child(2n+2) 将适用于 400px 以上的所有屏幕。