Question

我正在编写一个jQuery UI小部件，并尽可能坚持使用内置样式，以允许主题滚动皮肤。我的结构看起来（简化）大致如下：

<div class='ui-state-active'>
    <div class='ui-state-default'>
        <div class='ui-icon ui-icon-triangle-1-e'/>
    </div>
</div>

问题在于ui-icon根据其祖先的ui-state切换其图标集。但是，层次结构上的元素上的ui-state-active似乎优先于其直接父级上的ui-state-default，从而产生通常与其背景混合的图标。

我可以手动覆盖ui-icon元素的背景，但随后窗口小部件不再是可主题化的。还有另一种方法可以阻止ui-state-active影响该图标吗？

Answer 1

相关的ui css就是这个，

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_cccccc_256x240.png); }
...
.ui-state-default .ui-icon { background-image: url(images/ui-icons_cccccc_256x240.png); }
...
.ui-state-active .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }

在保持兼容性的同时，看起来没有什么可以做的。除了重新思考DOM的布局。

<div class='ui-state-active'>

</div>
<div class='ui-state-default'>
    <div class='ui-icon ui-icon-triangle-1-e'/>
</div>

Answer 2

您将不得不对css进行一些小的修改，将活动匹配到默认图标颜色，或重新考虑为什么在“活动项目”中有“非活动”项目。

我会建议第三种选择;）但感兴趣的行是：

/* Icons
----------------------------------*/

/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsHeader}*/; }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png)/*{iconsDefault}*/; }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png)/*{iconsHover}*/; }
.ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png)/*{iconsActive}*/; }
.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png)/*{iconsHighlight}*/; }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cd0a0a_256x240.png)/*{iconsError}*/; }

正如您所看到的，默认状态和活动状态具有相同的特异性，但活动状态稍后出现，因此无需更改其代码或您的代码（或亵渎jQuery over-ride），您就会陷入困境。

有没有办法阻止嵌套图标继承ui-state-active？

2 个答案: