CSS !important 不工作答案

【问题标题】：CSS !important not workingCSS !important 不工作
【发布时间】：2015-06-29 20:41:42
【问题描述】：

我有以下代码，由于某种原因，!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 表。

任何想法将不胜感激。

【问题讨论】：

这是 CSS 而不是 HTML。我重新标记了它，但希望你能改变标题。
@Ryan 谢谢，咖啡还没开始。改变了。
这是一个很好的例子，说明了为什么你不应该使用内联样式：当你需要的时候，它们很难被覆盖。理想情况下，应该有一个在单独的 CSS 中设置为 11px 的类。如果您的
也有一个类或 ID，那么覆盖跨度将很容易。

标签： html css

【解决方案1】：

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

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

!important 在 CSS 中允许作者覆盖内联样式（因为它们通常比样式表样式具有更高的优先级）。它不会自动使标记为 !important 的样式覆盖其他所有内容。

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

【讨论】：

那行不通。我的意思是，如果不删除元素上的样式信息，就无法为 span 元素强制使用更大的字体大小。
@Felix -- 好点！我已将 <span> 添加到选择器中，所以现在它应该足够具体了。
@Sean Vieira: 是的，但似乎我太严格了；)
@Felix King -- 鞠躬很高兴我能帮上忙！
我将删除我的答案（50% 错误；））所以你也应该更改你的文字（而不是参考我）。

【解决方案2】：

一个很好的阅读主题是CSS Specificity

p 的特异性为 1（1 个 HTML 选择器）
div p 的特异性为 2（2 个 HTML 选择器，1+1）
.tree 的特异性为 10（1 个类选择器）
div p.tree 的特异性为 12（2 个 HTML 选择器 + 一个类选择器，1+1+10）
#baobab 的特异性为 100（1 个 id 选择器）
body #content .alternative p 的特异性为 112（HTML 选择器 + id 选择器 + 类选择器 + HTML 选择器，1+100+10+1）

【讨论】：