Html 什么时候使用该软件！CSS中的重要属性

考虑：

#div p {
    color: red !important;
}
...
#div p {
    color: blue;
}

我知道如何

！重要提示

有效。在这种情况下，div将呈现红色，因为它现在具有优先级（

！important

）。但我仍然不能找到一个合适的情况下使用它。是否有

的示例！重要信息

节省时间？

这是现实生活中的场景 想象一下这种情况

您有一个全局CSS文件，可以全局设置站点的视觉方面

您（或其他人）在元素本身上使用内联样式，这通常是非常糟糕的做法

在这种情况下，您可以将全局CSS文件中的某些样式设置为重要样式，从而覆盖直接在元素上设置的内联样式

真实世界的例子？ 这种情况通常发生在您无法完全控制HTML时。例如，考虑解决方案。您希望您的零件是全局定义（样式化）的，但存在一些无法控制的内联样式<代码>！重要信息使此类情况更容易处理

其他真实场景还包括一些写得很糟糕的jQuery插件，它们也使用内联样式

我想你现在已经有了这个想法，还可以想出其他一些想法

您何时决定使用

！重要信息

？

---

我建议你不要使用

！重要信息

，除非您无法以其他方式完成。只要有可能避免，就要避免。使用大量的

！重要信息

样式将使维护变得更加困难，因为您打破了样式表中的自然层叠。

！重要的

有点像

eval

。这不是解决任何问题的好方法，没有它就无法解决的问题也很少。

覆盖样式属性 在示例中，假设您无法更改HTML源代码，但只能提供样式表。一些轻率的人直接在元素上添加了一种样式（boo！）

div{背景色：绿色！重要}

拿着

您通常使用的！当您已经用尽其他方法来增加CSS选择器的特殊性时，这一点很重要

---

因此，一旦另一个CSS规则已经涉及到ID、继承路径和类名，当您需要覆盖该规则时，您需要使用“重要”。

这是一个真实的、真实的场景，因为它实际上发生在昨天：

不使用

的替代方案！重要信息

在我的回答中包括：

• 在JavaScript/CSS中查找应用了某种难以捉摸的属性的位置
• 使用JavaScript添加属性，这比使用

  要好一点！重要信息

因此，

的好处是！重要的是，它有时可以节省时间。如果你像这样非常谨慎地使用它，它可能是一个有用的工具

如果你只是因为不知道如何使用它，那么你就是做错了


的另一个用途！重要信息
是当您正在编写某种外部小部件类型的东西，并且您希望确保您的样式将是应用的样式时，请参阅：



我必须使用
！重要信息
当我需要覆盖由使用“style”属性的JavaScript“插件”（如广告、横幅等）生成的HTML样式时

所以我想，当你不控制CSS时，你可以使用它。
严格地说，你不需要使用它！重要的是，如果你的CSS结构良好，没有太多的特殊性

最合适的使用时间！重要的是当你有一个特殊的风格，你想风格以外的网站的正常级联。
你使用
！重要信息
覆盖
css
属性

例如，您在ASP.NET中有一个控件，它以蓝色背景（在HTML中）呈现控件。你想改变它，但是你没有源代码控制，所以你附加了一个新的CSS文件，写了相同的选择器，改变了颜色，然后添加
！重要信息

最佳做法是，当您对SharePoint网站进行品牌/重新设计时，经常使用它来覆盖默认样式。
这是一个真实的示例

在使用GWT Bootstrap V2时，它将插入一些CSS文件，这将覆盖我的CSS样式。为了使我的属性不被覆盖，我使用了
！重要信息
使用
！重要信息
在电子邮件创建中非常重要，因为内联
CSS
是正确答案。它与
@media
结合使用，可在不同平台上查看时更改布局。例如，与智能手机相比，该页面在桌面上的外观（即，更改链接位置和大小。使整个页面适合于
480px
宽度（与
640px
宽度相当）。
我正在使用
！important
更改SharePoint web部件上元素的样式。在web部件上构建元素的JavaScript代码被深埋在SharePoint inne中r-加工

试图找到样式的应用位置，然后试图修改它对我来说似乎是一种浪费。在自定义CSS文件中使用
！important
标记要容易得多。
在代码本身中使用
！important
通常不是一个好主意，但它在各种重写中都很有用

我使用Firefox和dotjs插件，它基本上可以在指定的网站上自动运行您自己的自定义JS或CSS代码

下面是我在Twitter上使用的代码，它使tweet输入字段无论我滚动多远都始终保持在我的屏幕上，并使超链接始终保持相同的颜色

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;   
}

谢天谢地，Twitter开发人员没有太多地使用
！important
属性，所以我可以用它来
#left-area ul {
    list-style-type: disc;
    padding: 0 0 23px 16px;
    line-height: 26px;
}