title: Restoring an element's color to its original value when there's an overriding style formed with a parent selector
body: <p>The Bootstrap stylesheet has:</p>
  
  <pre><code>pre code {
      color: inherit;
  }
  </code></pre>
  
  <p>If my page now has an explicit <code>pre code { color: red; }</code>, the Bootstrap stylesheet style still takes precedence. Why?  [Edit: can ignore this question as it was due to the wrong order of definition.]</p>
  
  <p>How do I make <code>color</code> for <code>pre code</code> to take the color that is computed for <code>code</code>, without hardcoding the color value?</p>
  
  <p>Bootstrap has set the color for <code>code</code> to #383e3c based on the selected theme. I don't know the reason why it has set a different color for <code>pre code</code>. I would like my <code>pre code</code> to have the same color as <code>code</code>.</p>