Javascript 在所有屏幕宽度上应用的第n个子项_Javascript_Css_Reactjs_Css Selectors

Javascript 在所有屏幕宽度上应用的第n个子项

javascript css reactjs

Javascript 在所有屏幕宽度上应用的第n个子项,javascript,css,reactjs,css-selectors,Javascript,Css,Reactjs,Css Selectors,目前，我对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-chi

目前，我对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中的哪个元素应用右边的

边距0px

，而另一个元素有边距。这在小屏幕上非常有效，但对于中屏幕和大屏幕，似乎存在小的第n个选择器，并覆盖中屏幕和大屏幕中的第n个选择器。。。有没有办法克服这个问题

在chrome开发者工具上，我可以为小屏幕禁用第n个子选择器，这使得中屏幕可以完美工作。据我所知，在不同的媒体屏幕上，选择器将被更新

您的第一个媒体查询

@media（最小宽度：getEmFromPx（400））

将应用于所有具有400px或大于400px的屏幕，因为您使用的是最小宽度（它应该适用于最小宽度和最大宽度）

在第二次和第三次媒体查询中，您正在执行相同的操作，因此无需编写两次。

在这里，您将

右边距：0

设置为

第n个子项（3n+3）

，但您必须重置在上一次媒体查询中定义的

第n个子项（2n+2）

元素。因为

n个子（2n+2）

将适用于上述所有400px屏幕