覆盖没有 !important 的 CSS 类选择器

Question

我只是在为 Web 应用程序编写一个 javascript UI 对话框。问题是用户可以为 Web 应用程序创建自己的主题，其中可能包括元素 css 选择器（h1 {...}, div {...} 等），它会覆盖我的 UI 对话框的 css 格式。该对话框是一个 div 元素，它在类选择器上格式化（id 不起作用，因为此对话框可能会出现多次）。有没有办法停止影响 UI 对话框的用户模板样式的元素选择器，而不必使用巨大的 css 重置样式并为 UI 对话框的每种样式使用!important？像jQuery UI这样的UI库怎么会有对话框样式？

例如用户主题包括：

input {color:nuts; height:bananas; width:crazy; background:morenuts; }

UI 的 css：

.ui_modal_wrap input {color:red; border:1px solid black;}

UI 的 html：

<div class="ui_modal_wrap>
<input type="text" name="#" />
</div>

问题仍然是我必须为 .ui_modal_wrap 使用一个巨大的 css 休息，因为你不能真正编写具有用户可以应用的所有属性的 css（在这个例子中，height 和 width 元素仍然会破坏样式，因为 UI 的不包括高度和宽度）。

Answer 1

一般而言，您应该知道使用specificity rules 应用规则（如果两者都在外部样式表中）。

一般有一个你可以考虑的分数，适用于分数最高的元素的规则将被应用。

在选择器链中，每个元素类型值 1，类值 10，id 值 100 分。

body div.wrapper == 12 points

body div.wrapper div span == 14 points

body #quote == 101 points

因此，通常只需使特定于页面的规则（用于设置页面其余部分的样式）不那么具体，并让 UI CSS 接管。或者，您总是可以将 UI 标记放在 HTML 的“超级”位中，例如：

<div id="super">
    <div id="super2">
        //your UI stuff
    </div>
</div>

然后通过将#super #super2 放在该样式表上的每个规则之前，为 UI 的 CSS“命名空间”。

Answer 2

根本没有办法确保这一点，除非：

1. 您可以过滤用户的 CSS 并删除所有 !important 声明
2. 保证您的 css 代码插入在他们的后面。然后，您可以在所有内容上使用 !important 以确保您的 css 具有更高的特异性。

阅读css specificity

Answer 3

您将需要使用更具体的选择器的第二组样式，这将覆盖用户样式设置的元素。使用!important 只是这样做的一种方式。查看 CSS 特异性 了解更多信息。

HTML

<div class="ui-dialog">
    <h1>Dialog Heading</h1>
</div>

CSS：

div.ui-dialog h1 {
    color: red;
}

jQuery UI 通过在您使用主题滚轮时为您提供指定 CSS“范围”的选项来实现这一点。您可以将范围设置为.system-scope，然后在您的 HTML 中将所有 UI 元素包装在一个具有系统范围类的元素中。