Question

我对jQuery很新，主题覆盖CSS类时遇到问题。

这是我的HTML代码：

<head>
  .clicked
  {
    text-decoration: line-through !important;
    color: #000000; 
  }
</head>
...
<div data-role="collapsible" data-theme="b" data-content-theme="b" data-collapsed icon="arrow-r" data-expanded-icon="arrow-d">
  <ul data-role="listview" id="Key"></ul>
</div>

这是我的JS：

function WriteQuote(item) {
        $("#"+item).addClass(function(index, currentClass) {    
            if (currentClass.lastIndexOf("clicked") >= 0) {
                $("#"+item).removeClass("clicked");
                return; 
            }
            return "clicked";
        });
    }

我计划使用toggleClass，因此此代码仅用于测试目的。在查看Firebug时，我发现a.ui-link-inherit是首选并适用：

a.ui-link-inherit {
    text-decoration: none !important;
}
.clicked {
    color: #000000;
    text-decoration: line-through !important;
}

有没有办法让我的类覆盖jQuery主题的类？我的目标是在用户点击给定的listview元素时切换“直通”。

Answer 1

主题的CSS规则适用，因为它比您的更具体。解决方案是为您的规则添加更多特异性。

a.ui-link-inherit.clicked {
    color: #000000;
    text-decoration: line-through !important;
}

演示：http://jsfiddle.net/wryE5/

有没有办法让我的类覆盖jQuery主题的类？

1 个答案: