CSS！重要的不工作

afdcj2ne 于 2023-06-25 发布在其他

关注(0)|答案(3)|浏览(135)

我有下面的代码，由于某种原因，!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格式，而不是编写一个看似过于复杂的查找和替换函数。由于这个技巧是针对特定区域的代码，我不能改变CSS表。
任何想法将不胜感激。

css

来源：https://stackoverflow.com/questions/4616964/css-important-not-working

3条答案

按热度按时间

7uhlpewt1#

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

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

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

**参见：**W3C关于CSS Selector Specificity的文档。

Felix's Demo of the markup

赞(0）回复(0）举报 2023-06-25

j2qf4p5b2#

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

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

赞(0）回复(0）举报 2023-06-25

ar7v8xwq3#

我的问题是我使用innerHTML分配了一个类，而添加到innerHTML的类被忽略了。为了解决这个问题，我引用了this

赞(0）回复(0）举报 2023-06-25