blocks|key|927777|text|覆盖样式属性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|927778|在示例中，假设您无法更改HTML源代码，只能提供一个样式表。一些粗心大意的人直接在元素上添加了一种风格(嘘！)|927779|​|927780|+++++++div+{+background-color:+green+!important+}|code-block|syntax|javascript|927781|++++<div+style="background-color:red">
++++Take+that!
++++</div>|927782|927783|在这里，!important可以覆盖内联CSS。|927784|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|U|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<h2>Overwriting the Style Attribute</h2>

Say in the example that you are unable to change the HTML source code but only provide a stylesheet. Some thoughtless person has slapped on a style directly on the element (boo!)

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code> div { background-color: green !important }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div style="background-color:red"&gt;
 &lt;p&gt;Take that!&lt;/p&gt;
 &lt;/div&gt;</code></pre>
</div>
</div>


Here, !important can override inline CSS.

blocks|key|711643|text|当您没有其他方法来增加CSS选择器的特异性时，通常使用!important。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|711644|因此，一旦另一个CSS规则已经涉及到Ids、继承路径和类名，当您需要覆盖该规则时，您需要使用'important‘。|711645|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

You generally use !important when you've run out of other ways to increase the specificity of a CSS selector.

So once another CSS rule has already dabbled with Ids, inheritance paths and class names, when you need to override that rule then you need to use 'important'.

blocks|key|927892|text|当我需要覆盖一些使用“!important”属性的JavaScript“插件”(如广告、横幅等)生成的HTML样式时，我必须使用样式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|927893|所以我猜你可以在你不能控制CSS的时候使用它。|927894|entityMap^0|B|A|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

I have to use <code>!important</code> when I need to overwrite the style of an HTML generated by some JavaScript "plugin" (like advertising, banners, and stuff) that uses the "style" attribute.

So I guess that you can use it when you don't control the CSS.

blocks|key|711506|text|!important有点像eval。对于任何问题，它都不是一个很好的解决方案，而且很少有问题是没有它就不能解决的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|711507|entityMap^0|0|A|D|4|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<code>!important</code> is somewhat like <code>eval</code>. It isn't a good solution to any problem, and there are very few problems that can't be solved without it.

blocks|key|711770|text|严格地说，如果你的CSS结构很好，并且没有太多的特异性，你就不应该使用！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|711771|最合适的时候使用！重要的是当你有一个特殊的风格，你想在你的网站的正常层叠之外的样式。|711772|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Strictly speaking you shouldn't need to use !important if you've structured your CSS well and don't have too many degrees of specificity.

The most appropriate time to use !important is when you have one exceptional style that you want to style outside of your site's normal cascade.

blocks|key|712028|text|在代码本身中使用!important通常不是一个好主意，但它在各种覆盖中都很有用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|712029|我使用Firefox和一个dotjs插件，它基本上可以在指定的网站上自动运行您自己的自定义JS或CSS代码。|712030|这是我在Twitter上使用的代码，它使tweet输入字段始终停留在我的屏幕上，无论我滚动到什么程度，并使超链接始终保持相同的颜色。|712031|a,+a+*+{
++color:+rgb(34,+136,+85)+!important;++
}

.count-inner+{
+color:+white+!important;+++
}

.timeline-tweet-box+{
+z-index:+99+!important;
position:+fixed+!important;
left:+5%25+!important;+++
}|code-block|syntax|javascript|712032|谢天谢地，由于Twitter开发人员不太使用!important属性，我可以使用它来保证指定的样式一定会被覆盖，因为如果没有!important，它们有时不会被覆盖。这对我来说真的很方便。|712033|entityMap^0|8|A|0|0|0|0|M|A|1Q|A|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|W|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|X|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|R|$]]

Using <code>!important</code> is generally not a good idea in the code itself, but it can be useful in various overrides.

I use Firefox and a dotjs plugin which essentially can run your own custom JS or CSS code on specified websites automatically.

Here's the code for it I use on Twitter that makes the tweet input field always stay on my screen no matter how far I scroll, and for the hyperlinks to always remain the same color.

<pre><code>a, a * {
 color: rgb(34, 136, 85) !important; 
}

.count-inner {
 color: white !important; 
}

.timeline-tweet-box {
 z-index: 99 !important;
position: fixed !important;
left: 5% !important; 
}
</code></pre>

Since, thankfully, Twitter developers don't use <code>!important</code> properties much, I can use it to guarantee that the specified styles will be definitely overridden, because without <code>!important</code> they were not overridden sometimes. It really came in handy for me there.

blocks|key|711890|text|这是一个真实的例子。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|711891|当使用GWT-Bootstrap时，它将注入一些V2文件，这些文件将覆盖我的样式。为了使我的属性不被覆盖，我使用了!important。|offset|length|style|CODE|711892|entityMap^0|0|1L|A|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

This is a real-world example.

While working with GWT-Bootstrap V2, it will inject some CSS file, which will override my CSS styles. In order to make my properties to be not overridden, I used <code>!important</code>.

blocks|key|928079|text|当内联CSS是正确答案时，在创建电子邮件时使用!important是非常重要的。它与@media结合使用，用于在不同平台上查看时更改布局。例如，与智能手机相比，页面在桌面上的外观(即，更改链接位置和大小。使整个页面适合与640px宽度相反的480px宽度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|928080|entityMap^0|3|3|N|A|16|6|32|5|3C|5|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|G|$]]

The use of <code>!important</code> is very import in email creation when inline <code>CSS</code> is the correct answer. It is used in conjunction with <code>@media</code> to change the layout when viewing on different platforms. For instance the way the page looks on desktop as compare to smart phones (ie. change the link placement and size. have the whole page fit within a <code>480px</code> width as apposed to <code>640px</code> width.

blocks|key|928127|text|我正在使用!important更改SharePoint+web部件上元素的样式。在web部件上构建元素的JavaScript代码深埋在SharePoint内部工作的多个层次中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|928128|试图找到应用样式的地方，然后试图修改它，对我来说似乎是白费力气。在自定义CSS文件中使用!important标记要容易得多。|928129|entityMap^0|5|A|0|18|A|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

I'm using <code>!important</code> to change the style of an element on a SharePoint web part. The JavaScript code that builds the elements on the web part is buried many levels deep in the SharePoint inner-workings.

Attempting to find where the style is applied, and then attempting to modify it seems like a lot of wasted effort to me. Using the <code>!important</code> tag in a custom CSS file is much, much easier.

blocks|key|928207|text|我计划将!important用于第三方小工具，该小工具将嵌入到我无法控制的大量网站中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|928208|我得出的结论是，!important是保护小部件样式表不受宿主样式表影响的唯一解决方案(除了同样糟糕的iframe和内联样式)。例如，WordPress使用：|928209|#left-area+ul+{
++++list-style-type:+disc;
++++padding:+0+0+23px+16px;
++++line-height:+26px;
}|code-block|syntax|javascript|928210|此规则将覆盖我的小部件中的任何UL，因为id具有很强的特异性。在这种情况下，系统地使用!important似乎是为数不多的解决方案之一。|928211|entityMap^0|4|A|0|8|A|0|0|17|A|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

I am planning to use <code>!important</code> for a third-party widget meant to be embedded in a large number of websites out of my control.

I reached the conclusion <code>!important</code> is the only solution to protect the widget's stylesheet from the host stylesheet (apart from iframe and inline styles, which are equally bad). For instance, WordPress uses:

<pre><code>#left-area ul {
 list-style-type: disc;
 padding: 0 0 23px 16px;
 line-height: 26px;
}
</code></pre>

This rule threathens to override any UL in my widget because id's have strong specificity. In that case, systematic use of <code>!important</code> seems to be one of the few solutions.

blocks|key|928014|text|您可以使用!important覆盖css属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|928015|例如，你在ASP.NET中有一个控件，它用蓝色背景呈现控件(在超文本标记语言中)。你想要改变它，但是你没有源代码控制，所以你附加了一个新的CSS文件，编写了相同的选择器，改变了颜色，然后添加了!important。|928016|最佳实践是，当您对SharePoint站点进行品牌化/重新设计时，您会经常使用它来覆盖默认样式。|928017|entityMap^0|5|A|H|3|0|2O|A|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|T|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|K|$]]

You use <code>!important</code> to override a <code>css</code> property.

For example, you have a control in ASP.NET and it renders a control with a background blue (in the HTML). You want to change it, and you don't have the source control so you attach a new CSS file and write the same selector and change the color and after it add <code>!important</code>.

Best practices is when you are branding / redesigning SharePoint sites, you use it a lot to override the default styles.

Consider:

<pre><code>#div p {
 color: red !important;
}
...
#div p {
 color: blue;
}
</code></pre>

I understand how <code>!important</code> works. In this case the div will render red because now it has priority (<code>!important</code>). But I can't still figure out an appropriate situation to use it in. Is there an example where <code>!important</code> saves the day?

When to use the !important property in CSS

WordPress

考虑一下：#div p {    color: red !important;}...#div p {    color: blue;}我理解!important是如何工作的。在这种情况下，div将呈现红色，因为它现在具有优先级(!important)。但我还是找不到合适的场合来使用它。有没有!important拯救世界的例子？

问何时在CSS中使用!important属性
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问何时在CSS中使用!important属性EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问何时在CSS中使用!important属性
EN