jquery - 样式表规则应用

Question

使用 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>

我错过了什么？

提前致谢!

jack

Answer 1

关于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/