jQuery Mobile 自定义链接 CSS 样式答案

【问题标题】：jQuery Mobile custom link CSS stylejQuery Mobile 自定义链接 CSS 样式
【发布时间】：2013-09-03 15:09:38
【问题描述】：

我在将自定义链接样式放入我下载的 jQuery Mobile CSS 文件时遇到问题。

这是我使用的两种代码的示例：

.body A:link {color: #5f8bff; text-decoration: none}
.body A:visited {color: #5f8bff; text-decoration: none}
.body A:active {color: #5f8bff; text-decoration: none}
.body A:hover {color: #5f8bff ; text-decoration: underline; color: #ffffff;}

.body2 A:link {color: #e1d34b; text-decoration: none}
.body2 A:visited {color: #e1d34b; text-decoration: none}
.body2 A:active {color: #e1d34b; text-decoration: underline}
.body2 A:hover {color: #5f8bff; text-decoration: underline; color: #ffffff;}

此代码在放入 <span class="body"> 和 <span class="body2"> 时没有响应。

示例网址在这里：www.camavision.com/wp/jquery

有什么建议吗？我正在尝试创建三种不同类型的链接样式来覆盖当前的 CSS。

【问题讨论】：

标签： jquery css jquery-mobile hyperlink

【解决方案1】：

只要您的自定义 CSS 是最后加载的，并且您的 CSS 足够具体，那么它应该会覆盖之前的任何内容。

通过在其旁边放置“！重要”来确保您引用了正确的内容。例如

.body2 A:link {color: #e1d34b !important; text-decoration: none}

如果这样有效，那么您指的是正确的位置，但不够具体或加载顺序不正确。

注意：除非绝对必要，否则不要实际使用 !important，只需使用它来进一步排除故障

编辑：

尝试将 .ui-link 添加到您的 a 标签

    .body2 a.ui-link {color: #e1d34b; text-decoration: none}

你所有的陈述

【讨论】：

您可能会要求用户参考特定性文档，而不是放置 !important 甚至覆盖脚本应用的内联 css 或 css。这是参考特异性文档的链接。 coding.smashingmagazine.com/2007/07/27/…
我确实特别强调了不使用它，并将其用于测试目的。你在哪里看不到帖子的后半部分？
我将自定义 CSS 移到了 CSS 文件的底部（我把它错误地放在了开头）。但是，使用任何特定标签（body、body2、body3）仍然不会产生任何成功的结果。在工作结束之前将这些样式标签放在“index.html”文件中吗？
jsfiddle.net/snBuv 我正在使用此处找到的默认 jQuery Mobile 1.3.2 CSS 文件并尝试将 CSS 样式编码放入其中：jquerymobile.com/download
任何关于 CSS 覆盖的建议将不胜感激！