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>

我错过了什么？

提前致谢！

杰克

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/

样式表规则应用程序

1 个答案: