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的屏幕，因为您使用的是最小宽度（应该使用最小宽度和全部宽度）。

在第二和第三媒体查询中，您正在做相同的事情，因此无需重复编写两次。在这里，您将margin-right: 0设置为nth-child(3n+3)，但是您将不得不重置先前媒体查询中定义的nth-child(2n+2)元素。由于nth-child(2n+2)将适用于上方400像素的所有屏幕。

nth-child适用于所有屏幕宽度

1 个答案: