如何对 jquery ui 的不同元素设置不同的样式？

发布于 2024-12-04 02:34:05 字数 501 浏览 4 评论 0原文

为了以特定的方式设置 jqueryui 选项卡的样式，我的团队成员修改了 ui-state-default 类，如下所示

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default 
{ border: 3px solid transparent; 
  background: #F5AD4C 0px 0px repeat-x url(pix/redesign/orangebuttonstrip.jpg); 

  font-weight: bold; color: White;  }

现在的问题是我正在使用 jqueryui 自动完成组合框，它创建具有相同类的按钮元素

因此我有一个背景图像出现使它看起来丑陋而巨大。

如何为不同的元素设置不同的样式？我尝试将 button.ui-state-default 作为不同的样式，由 jqueryui 覆盖它。

原文

To style the jqueryui tabs in a particular way, my team members modified the class ui-state-default as follows

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default 
{ border: 3px solid transparent; 
  background: #F5AD4C 0px 0px repeat-x url(pix/redesign/orangebuttonstrip.jpg); 

  font-weight: bold; color: White;  }

The problem now is that I am using jqueryui autocomplete combobox which creates a button element with the same class

Thus I have a the background image appearing which makes it look ugly and huge.

How do I set different styles for different elements? I tried puttin button.ui-state-default as a different style by jqueryui overrides that.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蘑菇王子 2024-12-11 02:34:05

更改选项卡当前的 CSS 规则，如下所示：

.ui-tabs .ui-tabs-nav .ui-state-default, 
.ui-tabs.ui-widget-content .ui-state-default, 
.ui-tabs .ui-widget-header .ui-state-default { border: 3px solid transparent; 
  background: #F5AD4C 0px 0px repeat-x url(pix/redesign/orangebuttonstrip.jpg);
  font-weight: bold; color: White;
}

注意：.ui-tabs.ui-widget-content 不是错误，而是故意的。这意味着如果这两个类都存在，则按以下规则设置样式。

Change your current CSS rules for tabs as follows:

.ui-tabs .ui-tabs-nav .ui-state-default, 
.ui-tabs.ui-widget-content .ui-state-default, 
.ui-tabs .ui-widget-header .ui-state-default { border: 3px solid transparent; 
  background: #F5AD4C 0px 0px repeat-x url(pix/redesign/orangebuttonstrip.jpg);
  font-weight: bold; color: White;
}

Note: .ui-tabs.ui-widget-content is not an error, it's like that on purpose. It means if both of those classes are present, then style by the rule that follows.

回复收藏 0 原文

~没有更多了~