override css div display: none;
<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>