Html CSS！重要不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4616964/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS !important not working
提问by Jim
I have the following code and for some reason the !importantqualifier isn't working.
我有以下代码，但由于某种原因，!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>
The span tags are generated for website formatting. I was adding the div tag to change the output to PDF format instead of writing a seemingly overcomplicated find and replace function. Since this hack is for specific regions of code, I can't change the CSS sheet.
span 标签是为网站格式生成的。我正在添加 div 标签以将输出更改为 PDF 格式，而不是编写看似过于复杂的查找和替换功能。由于此 hack 是针对特定代码区域的，因此我无法更改 CSS 表。
Any thoughts would be appreciated.
任何想法将不胜感激。
回答by Sean Vieira
Give the <div>an id and then add this rule to your CSS stylesheet (or in a <style>tag if you don't want to change the style sheet):
给出<div>一个 id，然后将此规则添加到您的 CSS 样式表中（或者<style>如果您不想更改样式表，则添加到标签中）：
#your_div_id span {
font-family : calibri; font-size: 20pt !important;
}
!importantin CSS allows the author to override inline styles (since they have a higher precedence than style sheet styles normally). It doesn't automatically make the style marked !importantoverride everything else.
!importantin CSS 允许作者覆盖内联样式（因为它们通常比样式表样式具有更高的优先级）。它不会自动使标记的样式!important覆盖其他所有内容。
SEE:The W3C's documentation on CSS Selector Specificity.
Felix's Demo of the markup
回答by diagonalbatman
A good subject to read up on is CSS Specificity
一个很好的阅读主题是CSS 特异性
- p has a specificity of 1 (1 HTML selector)
- div p has a specificity of 2 (2 HTML selectors, 1+1)
- .tree has a specificity of 10 (1 class selector)
- div p.tree has a specificity of 12 (2 HTML selectors + a class selector, 1+1+10)
- #baobab has a specificity of 100 (1 id selector)
- body #content .alternative p has a specificity of 112 (HTML selector + id selector + class selector + HTML selector, 1+100+10+1)
- 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）
