如何以不同于jQuery-UI选项卡的样式来设置jQuery-UI自动填充的样式？

Question

我正在使用两个jQuery UI部件，自动完成和标签。

它们各自在jquery.ui.autocomplete.css和jquery.ui.tabs.css中分别有自己的样式表，但它们在jquery.ui.theme.css中共享很多样式。当我对jquery.ui.theme.css中的样式进行更改时，它会影响自动填充和制表符。如何自定义自动填充和制表符的不同样式？

我想改变的一件事是自动完成的背景悬停效果的圆角。正确的CSS改变，这是

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px; -khtml-border-top-left-radius: 0px; border-top-left-radius: 0px; }

但是我想的选项卡是圆的。所以我所做的改变是将半径从0px更改为5px。

要定制，例如在头部分像下面

Answer 1

认沽风格：

#my-tab .ui-corner-all, #my-tab .ui-corner-top, #my-tab .ui-corner-left, #my-tab .ui-corner-tl { -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px; -khtml-border-top-left-radius: 0px; border-top-left-radius: 0px; }

my-tab是你的jQuery UI的标签DIV ID

编辑：

从jquery ui tabs documentation

您的百位html将如下所示：

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs"> 
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> 
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li> 
    <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1"> 
     <p>Tab one content goes here.</p> 
    </div> 
    ... 
</div> 

的“菜单”，你会被改写：

#ui-tabs .ui-tabs-nav>li a { color: red !important }