html - 为什么 !important 在 CSS 中不起作用？

Question

我想在我的网站中将所有字体大小放大到 200%，here are some test code in fiddle ,

如果真的是 PX 问题，但如果我在“<-h2>”中添加样式，为什么这里的代码可以正常工作？

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

或者，还有一个问题，如何以相同的比例放大所有字体大小？

Answer 1

使用 em 和 rem。

您可以使用这个 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;
}

工作 fiddle :https://jsfiddle.net/eom40w0L/8/