CSS 文件和不需要的覆盖

Question

我有一个引用 3 个 CSS 文件的简单 HTML 页面。第一个是仅用于页面的样式表。另外两个用于两个独特模态的样式。这些模式 CSS 文件不是我创建的，它们很高兴单独在整个站点的其他页面上使用。

我的问题是这两个模态 CSS 文件都包含一些通用的选择器，因此它们混淆了彼此的样式。

我知道解决此问题的最佳方法是获取一个或两个文件并使其选择器唯一。一种方法是为选择器命名空间。

但是，我的问题是，既然我已经深入研究了这个页面，是否可以在不更改模态 CSS 页面的情况下防止这些 CSS 冲突？是否有任何工具可以提供帮助，例如 LESS ？将来防止这种情况的最佳做法是什么？

Answer 1

最好的解决方案确实是根据您的需要重构这些 css 文件。

但是，更简单的解决方案是在这两个第三方 css 文件之后包含您的样式表，并重新声明通用选择器的样式，这会自动覆盖之前的设置。

LESS/SASS 是帮助您更快、更舒适地编写 CSS 的优秀工具。我将 SASS 用于私有(private)工作并强烈推荐它。他们无法帮助您解决诸如您有 atm 之类的问题。

编辑:

使用 !important 是可能的，但被认为是坏习惯，因为它的目的是 give the user the possibility to override author-styles with his own .而不是使用 !important 你应该做的是:

1. 尽可能避免重复样式。
2. 如果您无法避免这种情况，请尝试通过以下任一方式解决此问题:
   • 级联(=使用正确的顺序覆盖以前的样式)
   • 使用selector specificity (W3C-Spec)。