jQuery UI CSS 没有覆盖答案

【问题标题】：jQuery UI CSS not overridingjQuery UI CSS 没有覆盖
【发布时间】：2011-10-03 08:08:08
【问题描述】：

我有一些从.ui-widget-content 和.ui-state-default 继承的锚图标。 .ui-widget-content .ui-state-default 的 background-position 覆盖了 .ui-icon-play 的 background-position。

当锚图标只继承.ui-state-default时，.ui-icon-play的背景位置优先级高于.ui state default。

我希望 .ui-icon-play 覆盖 .ui-widget-content .ui-state-default 以便从图像精灵中获得正确的图标图像。

当它们都是类并且根据 chrome 开发工具，.ui-icon-play 是 ui css 的第 232 行而 .ui-state-default, .ui-widget-content .ui-state-default 是第 69 行时，如何确定优先级？

当我执行addClass('.ui-icon-play') 时，background-position 仍然不会覆盖.ui-widget-content .ui-state-default。

这是我的代码的简化版本：

html

<div class="controls-container ui-widget-content">
    <div class="rep-controls">
        <a id="play" class="ui-state-default ui-corner-all ui-icon ui-icon-play" 
               title="Play/Pause"></a>
        <a id="stop" class="ui-state-default ui-corner-all ui-icon ui-icon-stop" 
               title="Stop"></a>
    </div>
</div>

$("#play").click(function() {
    if(playing == true) {
        $("#play").removeClass('ui-icon-pause');
    else {
        $("#play").addClass('ui-icon-pause');
    }
});

【问题讨论】：

标签： jquery css jquery-ui inheritance overriding

【解决方案1】：

假设您能够修改 CSS，只需尝试制作选择器：

.ui-widget-content a.ui-icon-play {[...]}

添加“a”将使选择器覆盖.ui-widget-content .ui-state-default，因为它更具体。

【讨论】：

我不明白我会在代码中的哪个位置使用它，你能详细说明一下吗？

【解决方案2】：

追求具体或 !important

【讨论】：