@media screen and()が想定通り適用されない

Question

例えば

@media screen and (min-width: 1000px) {
  p {
    margin:1px 1px 1px 1px
  }
}
@media screen and (min-width: 360px) {
  p {
    margin:0
  }
}

というようなCSSを書いたとした時に,スクリーンのサイズが1000px以上になっても
(min-width: 360px)が優先的に適用されてしまいます.
デベロッパツールには,1000pxになるまでは(min-width: 360px)のコードが表示され
1000px以上になると(min-width: 1000px)のコードが表示されるのでcss自体は正しく書かれているような気がするのですが,どのように解決すれば良いのでしょうか.
メタ情報は以下のように書いています.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

Answer 1

@mediaの順番を入れ替えてください。「1000px以上」は「360px以上」でもありますので、1000pxの場合は両方のCSSが有効となり、そして後から書いたほうが優先されます。

Comments

[hanamo]

適用される順番のことを失念しておりました.
ありがとうございました.