6

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

例如，用户主题包括：

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

UI的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（在这个例子中，height 和 width 元素仍然会破坏样式，因为 UI 不包括高度和宽度）。

4

3 回答 3

12

一般来说，您应该知道使用specificity rules.

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

在选择器链中，每个元素类型值一个，类值 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 来“命名空间” 。

于 2010-09-29T16:25:22.100 回答
0

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

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

读取CSS 特异性

于 2010-09-29T16:25:44.573 回答
0

您将需要使用更具体的选择器的第二组样式，这将覆盖用户样式设置的元素。使用!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 元素包装在具有系统范围类的元素中。

于 2010-09-29T16:25:52.100 回答