覆盖 CSS 类选择器而不使用 !important

Question

我只是为网络应用程序编写一个 javascript UI 对话框。问题是用户可以为网络应用程序创建自己的主题，其中可能包括元素 css 选择器（h1 {...}、div {...} 等），它们会覆盖我的 css 格式用于 UI 对话框。该对话框是一个 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

一般来说，您应该知道规则是通过特异性规则应用的（如果两者都在外部样式表中）。

一般来说，您可以考虑一个分数，然后将应用适用于分数最高的元素的规则。

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

body div.wrapper == 12 点

body div.wrapper div span == 14 点

body #quote == 101 点

所以一般只需制作页面特定的规则（页面其余部分的样式）不太具体，并让 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 特异性

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 元素包装在具有系统范围类的元素中。