如何将CSS主题仅应用于特定的jQuery-UI元素？

Question

我有一个已经用我自己的CSS主题构建的网站.我正在使用jQuery UI"tabs"小部件,但没有来自jQuery-UI的CSS.

现在,我正在尝试在我的一个页面中添加"日期选择器"小部件.如果我可以重用jQuery-UI默认主题就好了.

问题是日期选择器主题也应用于我的选项卡CSS.例如,"ui-widget"css属性应用于日期选择器和制表符元素.

我似乎无法找到一种方法将css属性仅应用于日期选择器.我看不到只适用于日期选择器DIV的"超级选择器".

处理这个问题的最佳方法是什么？

---

[编辑] datepicker小部件确实是问题所在.我无法应用特定于它的CSS样式.这是弹出的DIV的起始代码:

<div style="position: absolute; top: 300.4px; left: 149px; display: block;" id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">

因此,我无法添加超级选择器.什么是伟大的将是日期选择器小部件支持CSS范围.但事实并非如此.我被困在手动编辑jQuery CSS文件.

日期选择器目前正在重构.希望新代码能够解决这个问题.

Answer 1

$(window).load(function() {
   $('#ui-datepicker-div').addClass('CSS-Scope-Class');
});

该.addClass() jQuery的功能将添加必要的类的日期选择为它由主题样式有所回升.

我必须附加到窗口的加载事件而不是文档的ready事件,因为那时还没有插入datepicker.

注意:将datepicker添加到DOM和应用新类之间会有一个小的延迟,这意味着在页面加载完成时,datepicker可能看起来没有样式.

Answer 2

您可以使用主题滚轮在这里自定义您的主题http://jqueryui.com/themeroller/

使用 Firebug 的检查 DOM 功能找到您想要设置样式的项目，以定位您想要选择的类。