【问题标题】：jquery ui theme on all elements but onejquery ui 主题的所有元素，但一个
【发布时间】：2013-06-07 12:14:32
【问题描述】：

我在我的页面中使用了很多 jquery ui：自动完成、对话框、日期选择器等。我为这些元素设置了主题样式，没关系。

我还有一个标签导航，我想将它从主题中排除。我从我的主题中删除了所有与选项卡相关的（仅以选项卡开头的）css，但它仍然充满了我无法更改的 jquery ui css（小部件、标题、内容等），因为其他元素也会改变，我不想那样。我知道如何应用 css 范围，但这对我不利（很难使用范围主题设置自动完成和对话框的样式）。

有没有办法只从样式中排除标签？

谢谢

【问题讨论】：

覆盖 em w。别的东西
更改 jquery-ui css 内容既费时又费力，大多数时候都会出错。此外，您的页面变得不稳定。避免这样做。
为什么是-1？很多人问如何只为一个元素设置样式。我想为除一个元素之外的所有内容设置样式，并且我认为有人可能知道一种不错的方法。我会尝试覆盖它们。谢谢两位的回答。
你不能只为标签定义一个范围吗？
你做错了！大声笑，不，真的，你做错了。使用 Name-Spacing 在需要的地方“覆盖” ui css。使用 jQueryUI 选项卡，但确保将它们放在带有 ID 或类名的包装器中。然后只需在每个 UI CSS 覆盖之前使用名称。示例：#myElement .ui-tabs-nav { padding: 0; } 关于 jQueryUI 的一切都是可覆盖的，正因如此。

标签： jquery jquery-ui jquery-ui-theme

【解决方案1】：

出于这个原因，jQueryUI CSS 中的所有内容都是可重写的。您缺少的关键是您正在应用您直接覆盖。或者我假设。类似：

.ui-widget { font-size: 42px; }

我知道这就是他们在文档中显示的内容，但是当您希望“特定元素”生效时，这是完全错误的。为此，您需要依赖Name Spacing。这意味着在您要编辑的 UI 类名称之前使用您创建的 ID 或类名称。如：

#myEleID .ui-widget { font-size: 84px; }

这样，只有 ID 为 myEleId 的 Element 中使用 ui-widget 的子元素会受到影响。页面上的任何其他内容都不会受到任何影响。

为了获得更好的主意，我用 2 组选项卡给你做了一个小技巧。第一组被编辑为垂直，但使用我的命名空间进行更改。这样，无论 UI 主题如何，都不会影响第二组（设置为默认值）！您还会在小提琴底部找到一个主题切换器。试试看！

jsFiddle

#tabs { 
    width: 55em; 
}
#tabs .ui-tabs-nav { 
    padding: .2em .4em .2em .2em; float: left; width: 12em; 
}
#tabs .ui-tabs-nav li { 
    clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; 
}
#tabs .ui-tabs-nav li a { 
    display:block;
    padding: .5em 0;
    text-align: center;
    width: 100%;
}
#tabs .ui-tabs-nav li.ui-tabs-active { 
    padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; 
}
#tabs .ui-tabs-panel { 
    padding: 1em; float: right; width: 40em;
}

很久以前我还写了一篇关于在 jQueryUI 中获取当前选项卡的博客。它谈到了一些关于名称间距的内容，也可能对您未来的吞食有所帮助。
http://spyk3lc.blogspot.com/2012/08/jqueryjqueryui-help-tabs-get-currently.html

【讨论】：