title: Overriding CSS that uses a :not Selector
body: <p>I'm using a custom Bootstrap theme, and wanted to create a new class for certain tables. The original CSS has the following line:</p>
  
  <pre><code>table a:not(.btn), .table a:not(.btn) {
      text-decoration: underline;
  }
  </code></pre>
  
  <p>Later, I've added my own custom CSS, to remove the underline from links:</p>
  
  <pre><code>.gridview a {
      text-decoration: none;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table class="table gridview"&gt;...
  </code></pre>
  
  <p>Using Chrome's developer tools, I can see that my <code>gridview</code> class is loaded <em>after</em> the original table class, yet it is being overridden by the original. I've also experimented by replacing my CSS with the following:</p>
  
  <pre><code>table a, .table a {
      text-decoration: none;
  }
  </code></pre>
  
  <p>...but I'm getting the same result. There are likely a few workarounds I could use (such as <code>!important</code> if it really came to it), but I'd like to understand what's going on first and hopefully come up with a cleaner solution. Any ideas?</p>