CSS文件和不需要的覆盖

Question

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

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

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

然而，我的问题是，现在我在这个页面上已经非常深入了，无论如何要防止这些CSS冲突而不改变目前的模态CSS页面？是否有任何可以提供帮助的工具，例如LESS？将来阻止这种情况的最佳做法是什么？

Answer 1

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

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

LESS / SASS是帮助您更快，更舒适地编写CSS的绝佳工具。我使用SASS进行私人工作，真的推荐它。他们无法帮助你解决像你有问题的问题。

编辑：

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

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

Answer 2

假设：

...
<link rel="stylesheet" href="this_page.css" />
<link rel="stylesheet" href="modal_1.css" />
<link rel="stylesheet" href="modal_2.css" />
...

由于CSS的级联性质（对不起，我不得不）反复使用相同的选择器覆盖任何以前的样式。因此，如果modal_1.css和modal_2.css都将样式x应用于body标记，则第二个样式表将覆盖第一个样式。

可悲的是，除了如你所建议的那样，没有出路可以修改两个选择器以使它们更具体。

展望未来，避免覆盖先前声明的样式的最佳方法是始终关注您所定位的特定元素，并且它是DOM中的适当位置。请注意，LESS只是一个CSS预处理器，它只允许您使用不同的CSS语法。

Answer 3

我建议将一个公共类添加到该特定页面的正文标签中。使用该特定类的目标。如果您使用LESS或Compass等工具，您可以轻松实现目标。

.pageOne{ /*All the styles for this perticular page*/
    .header{

    }
    .sidebar{

   }
}

通过LESS或Compass解析时，它将如下所示。

.pageOne .header {}

.pageOne .sidebar {}

这样您的页面就会获得命名空间。