除一个元素外的所有元素上的jquery ui主题
我在我的页面中使用了很多jquery ui :自动完成、对话框、日期选择器等。我为这些元素设计了主题，这没问题。
我也有一个选项卡导航，我想把它排除在主题之外。我从我的主题中删除了所有与选项卡相关的css (只有那些以选项卡开头的css )，但它仍然充满了我无法更改的jquery ui css(小部件、标题、内容等)，因为这样其他元素也会更改，我不希望这样。我知道如何应用css作用域，但它对我不好(很难设置自动完成和带有作用域主题的对话框的样式)。
有没有一种方法可以只从样式中排除选项卡？
谢谢
回答 1
Stack Overflow用户
发布于 2013-06-07 21:06:07
正是由于这个原因，jQueryUI CSS中的所有内容都是可重写的。你遗漏的关键是你是直接应用你的覆盖。至少我是这么想的。类似于：
.ui-widget { font-size: 42px; }我知道这就是他们在他们的文档中显示的，但当你想要“特定元素”生效时，这是完全错误的。为此，您需要依赖于Name Spacing。这意味着在要编辑的UI类名之前使用创建的ID或类名。例如：
#myEleID .ui-widget { font-size: 84px; }这样，只有ID为myEleId的元素中使用ui-widget的子元素才会受到影响。页面上的任何其他内容都不会受到任何影响。
为了得到一个更好的想法，我给你做了两套标签。第一个集合被编辑为垂直的，但使用my Name Space进行更改。这样，无论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
https://stackoverflow.com/questions/16983885
复制相似问题
腾讯云开发者
