即使使用 !important 也会覆盖字体大小答案

【问题标题】：Font-size gets overwritten even with !important即使使用 !important 也会覆盖字体大小
【发布时间】：2014-06-22 10:23:16
【问题描述】：

我正在使用以下 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)

【问题讨论】：

试试这个font-size:' . $size . 'px !important;
观察...你真的想使用直接从某个计数值导出的像素大小吗？我会想出一个更强大的解决方案。不过，下面的答案可以解决您的问题。

标签： html css

【解决方案1】：

由于 CSS 顺序优先（您正在应用内联样式），您不需要 !important。问题是你错过了px，

例如。

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

【讨论】：