用我自己的覆盖 CDN CSS

Question

从 CDN 样式表覆盖 CSS 规则的最佳方法是什么？

例如，我想在所有锚定文本上使用文本装饰，我可以使用：

a{text-decoration: underline !important;}

因为 bootstrap 有：

a{text-decoration: none;}

有没有更好的方法？

Answer 1

是的，当替代方法是使用 !important 时，通常会有更好的方法。使用更高的 specificity。换句话说，使您的选择器更具体，以便它覆盖 Bootstrap 选择器。例如，body a{text-decoration: none;}

根据链接文章：

Instead of using !important, you consider:

Making better use of CSS cascading properties

Using more specific rules. By indicating one or more elements before the element > you're selecting the rule becomes more specific and gets higher priority

只有在绝对没有其他选择时才使用 !important。

Answer 2

在处理 CDN 样式表（我经常这样做）时，用您自己的规则覆盖它们规则的一个安全可靠的选择是使用 !important.

是的，你可以全力以赴使用特异性技巧和级联魔法。但最终，您会使代码复杂化，使其难以理解和维护，而且最重要的是，不能始终确保您的规则适用。

如果 !important 出于一个原因而存在，我想就是这样：覆盖 CDN 和您无法控制的其他 third-party 样式。

编辑（经过一些反对后；-）

这个问题可能专门针对 Bootstrap CDN。其他答案可能会满足这种情况。我不使用 Bootstrap.

我使用 third-party CSS 的经验主要涉及嵌入式工具，例如搜索、翻译、视频和幻灯片放映。

这些程序并不总是以相同的顺序加载样式表。所以依赖级联并不是一个好的解决方案。

有时 CDN 选择器已经 "maxed-out" 了。这是来自 Google 翻译小部件的示例：

#goog-gt-tt .translate-form .activity-form input.activity-submit.focus #goog-gt-tt .translate-form .activity-form input.activity-submit:active

向该选择器添加特殊性是可能的，但会使代码更加复杂和难以理解。

同样重要的是：third-parties 可以随时更改选择器的特异性，迫使您进行调整。

由于这些原因，我通常会下载一份 CDN 样式表并使用 !important 进行调整。

（添加 !important 还有助于在检查开发工具时将您的样式与 CDN 区分开来。）

Answer 3

!important 不需要这样的选择器。只要确保您的规则在bootstrap的规则之后就可以了。

<link rel="stylesheet" href="//bootstrap.cdn.url.wow.css">
<style>
  a {
    text-decoration: underline;
  }
</style>

用我自己的覆盖 CDN CSS

Override CDN CSS with my own

css

cdn