title: override css div display: none;
body: <p>Thanks for your time! The codes are very simple. I suppose it should display "This is CPU". But it didn't. Where am I wrong?</p>
  
  <p><a href="https://jsfiddle.net/keegoo/8ccbcyxc/" rel="nofollow">Fiddle</a></p>
  
  <p>For people who cannot open Fiddle, here's the codes:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="tab1" class="active" &gt;&lt;p&gt;This is CPU&lt;/p&gt;&lt;/div&gt;
  &lt;div id="tab2"&gt;&lt;p&gt;This is MEM&lt;/p&gt;&lt;/div&gt;
  &lt;div id="tab3"&gt;&lt;p&gt;This is Network IO Receive&lt;/p&gt;&lt;/div&gt;
  &lt;div id="tab4"&gt;&lt;p&gt;This is Network IO Send&lt;/p&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#tab1, #tab2, #tab3, #tab4 {
    display: none;
  }
  
  .active {
    display: block;
  }
  </code></pre>
  
  <p>By add <code>!important</code> it do works. But why if I changes all the ids to classes, it could work?</p>
  
  <p>e.g.: <a href="https://jsfiddle.net/keegoo/8qk0dzvn/" rel="nofollow">Fiddle</a></p>