html - CSS !important 不工作

Question

我有以下代码，但由于某些原因 !important 限定符不起作用。

<div style="font-family : calibri; font-size: 20pt !important;">
  <ul>
    <li>
      <span style="font-size: 11px;">
        <span style="font-size: 11px;">
          Honey Glazed Applewood Smoked Spiral Ham 
        </span>
        <span style="font-size: 11px;">
          Served with Dijon Honey Mustard and Turkey Roulade
        </span>
      </span>
    </li>
  </ul>
</div>

span 标签是为网站格式生成的。我添加了 div 标签以将输出更改为 PDF 格式，而不是编写一个看似过于复杂的查找和替换函数。由于此 hack 是针对特定代码区域的，因此我无法更改 CSS 表。

如有任何想法，我们将不胜感激。

Answer 1

给出 <div>一个 id，然后将此规则添加到您的 CSS 样式表(如果您不想更改样式表，则添加到 <style> 标记中):

#your_div_id span {
    font-family : calibri; font-size: 20pt !important;
}

!important in CSS 允许作者覆盖内联样式(因为它们通常比样式表样式具有更高的优先级)。它不会自动使样式标记为 !important覆盖其他一切。

查看: The W3C's documentation on CSS Selector Specificity .
Felix's Demo of the markup