html - why !important doesn't work in css? -

i want zoom in font-size 200% in web, here test code in fiddle,

if px issue, why here code working if add style in "<-h2>" ?

<div  > <h2 class="test" style="font-size:300% !important"> hello </h2> <h2 class="test2"> hello </h2> <h2 class="test3"> hello </h2> 

or, there question how can enlarge font-size on same rate?

use em , rem.

you can use http://pxtoem.com/

html

<div style="font-size:2rem !important" >     <h2 class="test">     hello     </h2>     <h2 class="test2">     hello     </h2>     <h2 class="test3">     hello     </h2> </div> 

css

.test{   font-size:1em; } .test2{   font-size:2em; } .test3{   font-size:3em; } 

working fiddle: https://jsfiddle.net/eom40w0l/8/