title: Style not getting overriden
body: <p>This is a section of my CSS stylesheet:</p>
  
  <pre class="lang-css prettyprint-override"><code>table tr td {
      border-width: 1px;
      border-style: solid;
      border-color: black;
      border-collapse: collapse;
      overflow: wrap;
      background-color: #CCFFFF;
      text-align: center;
  }
  table {
      width: 75%;
  }
  tr {
      maximum-width: 200px;
  }
  tr.RedThreshold {
      background-color: red;
  }
  tr.YellowThreshold {
      background-color: yellow !important;
      font-weight: bold;
  }
  </code></pre>
  
  <p>It styles this <code>YellowThreshold</code> element in my HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;tr class="YellowThreshold"&gt;
      &lt;td&gt;vrd70&lt;/td&gt;
      &lt;td&gt;29&lt;/td&gt;
      &lt;td&gt;0x127c&lt;/td&gt;
      &lt;td&gt;4.86&lt;/td&gt;
      &lt;td&gt;4.54&lt;/td&gt;
      &lt;td&gt;6.06&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>The end result picks up the bold from the <code>YellowThreshold</code>, but it’s not picking up the yellow background color.  I’ve tried it with just <code>Color</code> and with <code>Background-Color</code>, but no change.  There’s some priority issue I’m not getting past.  Any suggestions?</p>