html - 即使使用 !important，字体大小也会被覆盖

Question

我正在使用以下 PHP 在我的博客上输出一些标签:

foreach ($tagvalues as $tag => $count) {
    $size = 12 + $count * 2;
    echo '<div class="tag" style=" font-size:' . $size . ' !important; "> ' . $tag . ' </div>';
}

在我的博客上生成了这个 HTML:

...
<div class="tag" style=" font-size:14 !important; "> career </div>
<div class="tag" style=" font-size:16 !important; "> parenting </div>
...

如您所见，我正在尝试根据实例数设置每个标签的大小。代码输出正常，但所有标签的大小都相同。当我在 Chrome 中使用开发人员工具查看它时，我发现 font-size 属性没有被任何东西覆盖!这些标签的字体大小没有在其他任何地方设置，我真的很困惑为什么它被忽略/覆盖。

You can see my site here (need to click on My Blog to load tags)

Answer 1

您不需要 !important 因为 CSS 顺序优先(您正在应用内联样式)。问题是您缺少 px,

例如。

<div class="tag" style=" font-size:16px"> parenting </div>