从 CDN 样式表覆盖 CSS 规则的最佳方法是什么？
例如，我想在所有锚定文本上使用文本装饰：
a{text-decoration: underline !important;}
因为引导程序有：
a{text-decoration: none;}
有没有更好的办法？
【问题讨论】：
a { /* your style here */ }。只需在 cdn 样式表之后加载即可。
!important 不需要像这样的选择器。只要确保您的规则出现在 引导程序的规则之后，您就会没事的。
<link rel="stylesheet" href="//bootstrap.cdn.url.wow.css">
<style>
a {
text-decoration: underline;
}
</style>
【讨论】：
是的，当替代方法是使用!important 时，通常有更好的方法。使用更高的specificity。换句话说，使您的选择器更加具体，以便它覆盖 Bootstrap 选择器。例如body a{text-decoration: none;}
根据链接的文章：
不使用 !important，您考虑：
- 更好地利用 CSS 级联属性
- 使用更具体的规则。通过在元素之前指明一个或多个元素 > 您选择的规则变得更加具体并获得更高的优先级
只有在绝对没有其他选择时才使用!important。
【讨论】：
在处理 CDN 样式表（我经常这样做）时，使用自己的规则覆盖其规则的安全可靠的选择是使用 !important。
是的，你可以用特殊技巧和级联魔法全力以赴。但最终，您会使代码复杂化，使其难以理解和维护，最重要的是，您并不能确保您的规则始终有效。
如果 !important 存在的原因有一个，我想就是这样：覆盖 CDN 和其他您无法控制的第三方样式。
编辑（经过一番强烈反对；-)
这个问题可能只针对 Bootstrap CDN。其他答案可能满足这种情况。我不使用 Bootstrap。
我使用第三方 CSS 的经验主要涉及嵌入式工具，例如搜索、翻译、视频和幻灯片。
这些程序并不总是以相同的顺序加载样式表。所以依赖级联并不是一个好的解决方案。
有时，CDN 选择器已经“最大限度地利用”了特定性。以下是来自 Google 翻译小部件的示例：
#goog-gt-tt .translate-form .activity-form input.activity-submit.focus #goog-gt-tt .translate-form .activity-form input.activity-submit:active
向该选择器添加特定性是可能的，但会使代码更加复杂和难以理解。
同样重要的是：第三方可以随时更改选择器的特殊性，迫使您调整自己的选择器。
出于这些原因，我通常会下载一份 CDN 样式表并使用 !important 进行调整。
（在检查开发工具时，添加 !important 也有助于区分您的样式与 CDN 的样式。）
【讨论】：
!important。我可以向后弯腰以进行特异性和级联工作吗？可能在某些情况下。 !important 有什么问题？这似乎是它的完美用例。