nth-child применяется на всех экранах

Question

В настоящее время у меня есть следующее для компонентов реакции 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 DeveloperИнструменты Я могу отключить n-ный дочерний селектор для маленьких экранов, что позволяет работать на средних экранах.Было ли мое понимание, что на разных экранах мультимедиа селектор будет обновляться?

Answer 1

ваш первый медиазапрос @media (min-width: getEmFromPx(400)) будет применяться ко всем экранам, имеющим 400px или более 400px, потому что вы используете минимальную ширину (это должно применяться min this и up all).

inВо втором и третьем медиа-запросе вы делаете одно и то же, поэтому нет необходимости писать его дважды.Здесь вы устанавливаете margin-right: 0 на nth-child(3n+3), но вам придется сбросить элемент nth-child(2n+2), который был определен в предыдущем медиа-запросе.Потому что nth-child(2n+2) будут применимы все экраны 400px выше.