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

Question

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

例如,用户主题包括:

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

用户界面的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(在这个例子中,高度和宽度元素仍会破坏样式,因为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 .