CSS!重要的不行

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在CSS中允许作者覆盖内联样式(因为它们通常具有比样式表样式更高的优先级).它不会自动使标记的样式!important覆盖其他所有内容.

请参阅: W3C关于CSS选择器特异性的文档.
菲利克斯的标记演示

Answer 2

阅读的一个很好的主题是CSS特异性

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 + 10)
5. #baobab的特异性为100(1 id选择器)
6. body #content .alternative p的特异性为112(HTML selector + id selector + class selector + HTML selector,1 + 100 + 10 + 1)