title: Why does a <h2> inside a <h1> not inherit the value of color property?
body: <p>Look at this simple example:</p>
  
  <pre><code>&lt;style&gt;
     h1 {
        color: red;
     }
  &lt;/style&gt;
  
  &lt;h1&gt;this is the 'h1'.&lt;h2&gt;this is the 'h2'&lt;/h2&gt;&lt;/h1&gt;
  </code></pre>
  
  <p>I expected the color of the string within the 'h2' to be red, but it is still black.</p>
  
  <p>This has confused me for a while. Why does it happen?</p>