jQuery Mobile 自定义链接 CSS 样式

Question

我在将自定义链接样式放入我下载的 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"> .

示例 URL 在这里:www.camavision.com/wp/jquery

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

Answer 1

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

通过在其旁边放置一个“!important”来确保您引用的是正确的内容。例如

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

如果可行，则说明您指向了正确的位置，但不够具体或加载顺序不正确。

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

编辑:

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

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

你所有的陈述