这个非常棒的 CSS 技巧已经存在一段时间了，但我希望专门发一篇帖子再次分享它，以传播这个好消息。
我们通常认为内联样式是覆盖我们在 CSS 中设置的样式的一种方式。99% 的情况下，情况确实如此，而且非常方便。但有些情况下，您需要反过来操作。也就是说，某些标记上存在您绝对无法删除的内联样式，但您需要覆盖这些样式。这可能是从外部 JavaScript 插入到页面上的标记，或者可能是从您无法轻松控制的 CMS 内部生成的标记。
谢天谢地，我们**可以**直接从样式表中覆盖内联样式。请看以下示例标记
<div style="background: red;">
The inline styles for this div should make it red.
</div>我们可以用以下方法解决这个问题
div[style] {
background: yellow !important;
}其他分享此技巧的地方
Soh Tanaka，Natalie Jost
哇，这是我以前不知道但肯定可以用到的东西。我们有一些客户使用 Adobe Contribute 编辑他们的网站，并最终使用了未经批准的颜色或样式 - 所以这绝对有助于覆盖这些样式。
很酷。但这在 IE6 中不起作用。
为什么要使用 IE6。它是一款近 9 年前的浏览器……
不过这个技巧不错 :)
同意，不喜欢 IE6……但试着告诉大型公司的 CIO/CTO，他们的大多数用户都在使用 IE6。
每次我读到有人完全否定 IE6 时，我的感觉就是这样。
当大型公司无法/不愿意升级其用户时 - 并且这些用户恰好是该公司的客户（例如……在金融服务公司中） - 那么 IE6 的百分比可能远高于统计网站通常报告的百分比。
我必须同意 John 和 Greg 的观点。像“那就不要用它”这样的说法我实在无法接受 - 因为我自己确实没有用它 - 很少有设计师/开发人员用它（浏览时是这样，测试时当然除外）。但是，我们的客户确实有使用 IE6 的。John 的例子完全正确。我的一家大型能源公司客户，其所有员工都必须/只能使用 IE6，而且至少在未来一年左右的时间里，情况都将如此。
所以，“不要使用它”的说法根本行不通。
在一个系统上安装多个浏览器是可能的。使用 IE6 用于他们古老的软件系统，使用 Chrome/Firefox 用于其他所有内容。
此外，即使此技巧在 IE6 中不起作用也无关紧要……如果他们定期使用 IE6，他们已经习惯了在网站上看到一些怪异的东西。
所以说“在 IE6 中不起作用”和说“不要使用它”一样令人讨厌。
很简单。告诉他们，这会导致生产力下降，因为它不支持诸如选项卡之类的省时功能。编造一些虚假数字来“证明”他们每年因生产力损失而损失 500,000 美元。然后提供您的咨询服务并升级他们的系统。
公司拒绝从 IE6 切换的最常见原因是，他们受限于某些仅适用于 IE6 的系统或软件。升级基础设施的成本通常过高 - 肯定高于生产力损失的成本。
我不喜欢为了自己的方便而欺骗客户的想法。
最近我查看了一个我认为受众广泛的网站（一个主要的音乐活动）的统计数据，并注意到 IE6 的份额大于 Firefox 的所有版本。
根据这些结果，支持 IE6 比支持 Firefox 更重要。
Bobby van der Sluis 有一个不错的 避免内联样式的 JS 函数；这并不总是可能的，尤其是在使用库时。
最近当我查看我其中一个网站的 Google Analytics 时。其中 40% 是 IE6 用户。这很悲哀，但我们至少还需要一年时间才能考虑到 IE6 用户。
我上个月的统计数据？由于我们的主要客户是一家目前不愿升级的大公司，因此 66.49% 的用户使用 IE6。对此你无能为力，当然也无法忽视……
那么，他们可以忍受丑陋的样式。
我无法理解公司/客户使用 IE6 的决定。我尊重他们作为客户说“我们使用 X”的权利。
我只是有点困惑 - 更新的浏览器更安全也更快。除了“我们一直用它”之外，坚持使用 IE6 的理由是什么？
这就是整个大公司的思维方式。例如，考虑以下情况
需要多少牛津大学毕业生才能更换一个灯泡？
“更换？！”
问题在于，很多消费者不像在本网站发帖的人那样精通网络。他们不知道如何升级或如何进行升级。这很糟糕，但这是现实。最好的解决方案是保持简单。
我最近与一些在大型银行/律师事务所工作的朋友交谈过，他们似乎明白他们的公司拥有无法在 IE6 之外运行的内部系统。我的猜测是，这些可能是以非常落后的方式构建的基于浏览器的/内部网解决方案，它们在较新的浏览器中无法“正常”运行。
是的，情况确实如此。与其说这些公司，即使是那些行动缓慢且不注重技术的公司，**想要**使用 IE6，不如说他们基本上是被锁定了。许多业务和企业软件与非 IE6 浏览器不兼容，通常是这些公司投入大量资金且对其日常运营必不可少的定制软件。
更新这些软件需要大量的资金和时间投入，以及可能的操作变更，因此他们无法升级。因此，您不会看到更新浏览器的全面推出，并且许多公司可能必须执行“不要升级 IE”的策略，以确保其所有员工都能访问相关软件。当然，员工可以在个人基础上自由安装替代的非 IE 浏览器，但如果 IE6 是公司要求的标准，那么他们中的大多数人将在工作场所坚持使用它。
我同意你朋友的说法。
我正在一家陷入这种困境的公司工作。许多在线实时系统主要出于两个原因在 IE6 中可视化
1) 开发人员没有时间“适应”任何其他浏览器（即使他们想这样做）
1a) 领导层：“好吧，它能工作 - 那又怎样？它仅限于内部网”。而不是安装新的浏览器等。这是在浪费时间，而且会影响 IT 安全、防火墙等。换句话说，不要更改正在运行的系统 - 除非有重大变革……
2) 最重要的是：标准化……
不可取：不同的浏览器：对管理员来说太麻烦了，他们已经忙于部署所有标准化的软件包了。
而不是继续
作为一名网页设计师，我正在绝望县工作。唯一的希望：迟早最高法院会裁决。
接受它或停止与想要 IE6 的客户签订合同 - 但请停止抱怨。我再也无法忍受了……
归根结底总是：“金钱至上，……其他一切靠边站”
我们是否喜欢它并不重要！我们能改变它吗？或者时间会为我们改变它？
b r
未注册
和平！！！
你个疯子！我喜欢。
是的，属性选择器在 IE 6 中不受欢迎（对于那些说为什么使用 IE 6 的人，好吧，你就是不明白……）
不过，这仍然是一个不错的技巧。
IE6 用户将不得不忍受红色背景。
没错。
是的 -
仅仅因为某些东西在 IE 6 的落后版本中不起作用，并不意味着它不应该被使用……尤其是在这种情况下，使用或不使用它在 IE 6 中会产生相同的结果，但在 IE 7+ 中会产生更好的结果。
这是不言而喻的……
这就是 css-tricks 的意义所在！继续努力。
很棒的文章，谢谢 :)
有个问题：当我选择本文中的文本时……它会选择带有红色背景颜色的文本……这是怎么回事？这看起来真的很棒……
谢谢
我在样式表中找到了这段代码：
*::-moz-selection {background:#FE4902 none repeat scroll 0 0;
color:white;
}
如果你在这个网站上搜索“文本选择”，你会发现……另一个不错的技巧！ :)
你始终可以使用添加到外部样式表中的“!important”来覆盖内联 CSS。在所有浏览器中都能正常工作。
我不认为这是真的。如果你能提供一个测试用例，我很乐意看看。
!important 关键字创建了一个单独的第二个继承树。!important 声明将覆盖所有其他声明，无论是链接的、阻塞的还是内联的……除了任何其他位于其下方的 !important 声明！ :)
以下是规范对此的解释。
自己试试吧！
style.css
p { color: red !important; }test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" href="./style.css" type="text/css" media="screen">
<title>使用 !important 测试 CSS 继承</title>
<style type="text/css">
p {
font-weight: bold;
}
</style>
</head>
<body>
<p style="color: blue; font-weight: normal;">测试</p>
</body>
</html>
所以我确实创建了一个测试页面
https://css-tricks.cn/examples/OverrideInlineStyle/index.html
重点是，是的，!important 部分本身就能解决问题。它不需要 [style] 属性选择器来覆盖内联样式。事实上，[style] 属性选择器会导致它在 IE 6 中无法正常工作。
但是，[style] 属性选择器仍然很有用，因为它可以仅选择具有内联样式的特定元素并忽略没有内联样式的元素，这非常有用。
有趣的是，在 Safari 4（公开测试版）中，你的示例链接中的第二个框对我来说显示为红色背景。其他两个示例工作正常。你可能需要将 !important 指令合并到这篇文章的更新中，以供我们这些不幸需要忍受 IE 6（以及出于某些令人悲伤的原因，Safari 不支持此覆盖）的人使用。
此演示在 IE7 中不起作用
是的，第二个在我的 Firefox（3.0.10）中也显示为红色
我有一个关于此的小问题。假设由于某种原因，你在同一页面上拥有 2 个具有内联样式的 div。这会覆盖这两个 div 吗？如果是，如何只定位其中一个而不定位另一个？
使用类或 ID，或者无论如何你如何选择该 div。
此解决方案在 IE 的任何版本中都不起作用。我也在 IE8 中进行了测试。
是的，它确实可以。
发布测试，让我们看看。
如果 IE7 和 IE8 处于标准兼容模式，它将起作用，你可以使用正确的 DOCTYPE 强制执行此模式。如果你在 HTML 测试文档的开头使用的是<html>
尝试在开头使用
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">或
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
嗨，James，
它仍然无法正常工作，你能帮我吗？
我的代码是
如何使用样式表覆盖内联样式
div[style] { background: yellow !important;}
此 div 的内联样式应使其变为红色。
代码
print("<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
如何使用样式表覆盖内联样式
div[style] { background: yellow !important;}
此 div 的内联样式应使其变为红色。
“);
对于 IE6（小蓝），只需删除“[style]”。
我不知道你们在说什么，!important 标签在 IE6 中工作得很好。我甚至尝试删除了 doctype，它仍然在 IE6 中工作。我在完整的 IE6 版本中对其进行了测试，而不是测试程序（IEtester 等）。
我必须在我的全职工作中一直使用它们（我在 Belo Interactive 工作，这是美国第九大媒体公司[他们拥有大量新闻网站]），并且我们的许多新闻网站都有一些客户/“网站管理员”试图自己工作，这实际上只是用内联样式、表格以及你能见到的最糟糕的东西把一切都搞砸了。说真的，这会让圣婴耶稣哭泣。
是的，我不熟悉你在 CSS 中使用的 [style]。它有什么用？不需要它。
此示例使用 [style]（属性选择器）向我们展示 CSS 正在定位具有“style”属性的 div。你也可以使用类或 ID。通常你不想仅仅使用“div”——除非你想在页面上的每个 div 上都使用黄色背景？
尽管这可能是一个糟糕的示例选择，因为不懂 CSS 的人会尝试使用它，然后想知道为什么它在旧浏览器中不起作用。
对于那些说它在 IE6 中起作用的人，请记住 IE6 存在一个错误，即 !important 声明后的任何内容都会被计算（而不是像预期的那样被覆盖）。因此，在 IE6 中你仍然需要小心使用它。
我更喜欢传统的“!important”，它可以在不使用 attr 部分 [style] 的情况下覆盖任何内联样式。我不确定为什么要使用它，因为它在 IE6 中会失效。
是的，我会只使用 important 标签并给 div 一个类或 ID，或者我错过了什么？
谢谢！你今天救了我。某个 Drupal 模块或更新在内容输入字段上插入了一个“display:none”，我能够将其恢复。我仍然需要弄清楚原因，但它已经回来了。
非常感谢！我喜欢学习这些技巧！
非常棒的技巧。谢谢。
非常棒的技巧，Chris！
我认为你应该阐明“[style]”的目的，并提到覆盖无需它也能实现..
谢谢！非常有帮助 :)
感谢你的提示，我相信在不久的将来我会用到它 :)
它可以在没有“[style]”的情况下工作。
是的，我会只使用 important 标签并给 div 一个类或 ID，或者我错过了什么？
“!important”规则确实在IE6中可以正常工作……但是与其他浏览器一样，它仅在应用于样式表或覆盖中id或类的最后一个实例时才有效。
示例；
如果你的样式表定义了一个这样的类
.header{
background-color: red “!important”;
}
然后在样式表的后面，你又定义了同一个类，如下所示
.header{
background-color: #f1f1f1;
}
那么浏览器将使用#f1f1f1而不是红色，即使“!important”已应用于红色。
每当我使用它们时，我都会尝试将它们添加到样式表的底部以避免任何冲突。
为什么有人会使用内联样式？太乱了。
不幸的是，大多数所见即所得编辑器都使用内联样式。
时机太棒了。
我正在设计一个类似于90年代的网站，目前我无法修改HTML。这是标记中的内容
<font size="-2" color="red"> :: events</font>
我很惊讶这有效，但它确实有效
font[color]{color:green;}
这是一个测试，这有效吗？
这应该可以工作，但需要注意几点：它在IE6中不起作用……不确定其他版本是否支持属性选择器。此外，这将更改任何具有“color”属性的font的颜色，因此如果标记中的其他区域也包含这些，则font[color]选择器也将对其进行定位。我遇到过一个问题，如果我不需要与IE6兼容，这个方法可以为我节省大量工作。
非常有用，谢谢！
如此简单，很棒的提示，我不知道有任何方法可以覆盖内联样式，在样式表中直接覆盖非常方便。谢谢！！！
这是每个CSS专家都应该知道的。
小技巧可以使世界变得更加顺畅，很棒的技巧——谢谢。
我实际上更喜欢阅读评论而不是文章；)
无论如何，感谢分享知识/财富 :)
不错的技巧，但希望我用不上它
太棒了，感谢你的建议
非常有用。我的程序员总是编写内联样式。这将有助于我快速找到并修复它们。谢谢伙计 :) 干得漂亮！
显然，你可以在IE7中用全局样式覆盖内联样式。“!important”在其他浏览器中是必需的。
p {text-indent:0px; text-indent:0px !important;}
内容在此…
谢谢！这运行得如此顺利，简直让人觉得不可思议。我需要这个是因为Meta Slider和/或Flexslider一定使用了某种加密，因为我查看了它们的所有文件以查找一个神奇的div标签，只有浏览器的开发者工具才能找到——它在文件中不是作为div标签存在的，但显然是其他东西。而且，我需要覆盖此div标签的内联样式，将其从height: 0px;更改为height: 230px;。并且，在询问Meta Slider插件的开发者这个神秘div标签的位置后，我还没有收到任何回复。但我很高兴我找到了你的网站。这就是答案。再次感谢。
令人印象深刻！我以前不知道可以这样做。谢谢！
如何在网站中搜索内联样式……任何帮助？