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>

标签用于网站格式化。我添加

标签以将输出更改为PDF格式，而不是编写一个看起来过于复杂的查找和替换函数。由于这个技巧仅适用于特定的代码区域，因此我不能更改CSS表。

欢迎提供任何建议。

- Jim

---

这是CSS而不是HTML。我重新标记了它，但希望您能更改标题。 - Ryan Li

@Ryan 谢谢，咖啡还没起作用。已更改。 - Jim

这是一个很好的例子，说明为什么不应该使用内联样式：当你需要覆盖时，它们可能会非常难以处理。理想情况下，<span>应该有一个类，该类在单独的CSS中设置为11px。如果您的<div>也有一个类或ID，那么覆盖这些<span>将变得非常容易。 - Spudley

Answer 1

给 <div> 元素加上一个id，然后在你的CSS样式表中添加以下规则（如果你不想改变样式表，则可以在 <style> 标签中添加）：

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

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

请参考：W3C关于CSS选择器特异性的文档，Felix的演示标记。

- Sean Vieira

---

那样做行不通。我的意思是，在不删除元素的样式信息的情况下，您无法强制 span 元素使用更大的字体大小。 - Felix Kling

@Felix -- 好观点！我已经将<span>标签添加到选择器中，所以现在它应该足够具体了。 - Sean Vieira

@Felix King -- 鞠躬 很高兴我能提供一些帮助！ - Sean Vieira

我将删除我的回答（它有50%的错误;）所以你应该改变你的文本（而不是提到我）。 - Felix Kling

@ Felix - 已完成 - 您的贡献现在已匿名，如您所愿 :-) - Sean Vieira

Answer 2

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

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

- diagonalbatman

Answer 3

我的问题是我使用innerHTML来分配一个类，而在innerHTML中添加的类会被忽略。为了解决这个问题，我参考了this。

- Apurva Thorat