使用jQuery UI自动完成和选项卡 - 修改CSS的冲突

Question

我目前正在使用已修改css的jQuery UI标签来重新定位标签的位置和外观。

我也有jQuery UI Autocomplete同一页面。但是，使用默认的jQuery UI css进行自动完成会破坏自定义选项卡的外观。

我修改了标签css以查看更高的div，试图将其隔离一点：

#MYContainer .ui-state-active a, 
#MYContainer .ui-state-active a:link, 
#MYContainer .ui-state-active a:visited { 
color:transparent;
text-decoration: none; 
background-color:#fff;
background-repeat:no-repeat;
width:11px;
height:11px;
margin-right:05px;
padding:0;
color:transparent;

}

但是，保留原始css来处理自动完成的UI会覆盖此内容。

关于我如何在同一页面上拥有两个经过修改的UI组件的任何建议都将不胜感激。

*的 修改 ** 这是我的HTML用于启动自动完成的输入

<div id="searchwrapper">
<input title="Title" type="text" id="SearchBox"/>
<button type="button" id="SearchButton">Search</button>
</div>

Answer 1

使用css选择器仅定位选项卡。您可以添加包装器或使用精确选择器，例如＆gt;使它工作。

使用您的HTML，我可以为您提供更好的示例。