jquery - 样式表规则应用

使用JQuery mobile 1.3.2时，我无法设置某些链接的样式。我不希望所有链接看起来都一样，因此有些链接将使用一种样式，而另一些链接将使用另一种样式。我试图添加自己的自定义类，甚至重写JQuery样式；但是，两次尝试均未成功。

我创建了http://jsfiddle.net/qdz9b/1/来帮助说明我的问题。

自定义样式表（在jQuery CSS之后加载）

.ui-link{color:#000000;}
.ui-link:visited{color:#000000}
.myLink{color:#000000;}
.aDifferentLink{color:#FF0000;}

.myImportantLink{color:#000000 !important;}

HTML

<a href="#test">basic link, no custom class</a><br/>
<a href="#test" class="myLink">link with custom class, not working either.</a><br/>
<a href="#test" class="aDifferentLink">a different link, should be red. not working either.</a><br/>
<br>
<a href="#test" class="myImportantLink">link with !important class, the only way I can get it to work.</a><br/>

呈现的HTML

<a href="#test" class="ui-link">basic link, no custom class</a>
<a href="#test" class="myLink ui-link">link with custom class, not working either.</a>
<a href="#test" class="aDifferentLink ui-link">a different link, should be red. not working either.</a>
<a href="#test" class="myImportantLink ui-link">link with !important class, the only way I can get it to work.</a>

我想念什么？

提前致谢！

杰克

最佳答案

关于如何应用CSS规则，您可以阅读以下文章：
http://webdesign.about.com/od/advancedcss/a/aa062706.htm

简而言之，.ui-body-c .ui-link（来自jquery-mobile.css）的优先级高于.myLink（您的自定义CSS样式）。并且!important强制应用指定的CSS规则。

这是工作示例：
http://jsfiddle.net/qdz9b/2/