title: CSS and how media queries are applied
body: <p>Suppose I have</p>
  
  <pre><code>/*
  css for elements section #1 in page
  css for elements section #2 in page
  */
  
  @media screen and (max-width: 960px) {
  /* redefines/alters CSS for elements in section #1 in page */
  }
  
  @media screen and (max-width: 700px) {
  /* redefines/alters CSS for elements in section #2 in page */
  }
  </code></pre>
  
  <p>I have read multiple places that it is always only one media query that is matched... And therefore one can not rely on the CSS already defined for <strong>@media screen and (max-width: 960px)</strong> will be applied first before <strong>@media screen and (max-width: 700px)</strong></p>
  
  <p>However in my tests when resizing a browser window down, I can see <strong>@media screen and (max-width: 960px)</strong> being applied first. Then I size the window even smaller I can see the changes are kept/combined when <strong>@media screen and (max-width: 700px)</strong> gets applied</p>
  
  <p>So my question is... Is what I am seeing pure luck and against the specification? Or am I missing something?</p>