jQuery UI CSS 没有覆盖

Question

我有一些 anchor 图标继承自 .ui-widget-content 和 .ui-state-default。 .ui-widget-content .ui-state-default 的 background-position 覆盖 .ui 的 background-position -图标播放。

当 anchor 图标只继承自.ui-state-default时，.ui-icon-play的background-position优先级高于.ui 状态默认值。

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

当它们都是类时如何确定优先级，根据 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>

js

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

Answer 1

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

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

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