Question

我只是为网络应用编写了一个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; }

用户界面的CSS：

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

用户界面的HTML：

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

问题仍然是我必须为.ui_modal_wrap使用巨大的css，因为你无法用用户可以应用的所有属性来编写css（在这个例子中，高度和宽度元素仍然会破坏样式，因为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来“命名”用户界面的CSS。

Answer 2

除非：

，否则无法确保这一点

您可以过滤用户的CSS并删除所有！important声明
保证您的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通过为您提供在使用Theme Roller时指定CSS“范围”的选项来实现此功能。您可以将范围设置为.system-scope，然后在HTML中将所有UI元素包含在具有系统范围类的元素中。

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

3 个答案: