CSS 文件中的样式覆盖了页面中应用的样式答案

【问题标题】：Styles from CSS file is overriding the style applied in the pageCSS 文件中的样式覆盖了页面中应用的样式
【发布时间】：2014-08-29 07:00:00
【问题描述】：

我正在使用 jQuery 添加一个 css 类

//Set the css class for tabItem's link
$("#" + menuID + " a").removeClass('navLinkNormal');
$("#" + menuID + " a").addClass('navLinkSelected');

但是 colr 值被不同 css 文件中的 a:link 和 a:visted 样式所取代。因此，它不是红色，而是文本显示黑色。

我尝试了各种方法，但都不起作用。我们如何强制使用红色链接？

参考文献：

HTML

   <ul id="nav">
        <li id="nav_Container" class="tabItem"><a href="javascript:void(0);">Add By Container</a></li>
        <li id="nav_WorkLot" class="tabItem"><a href="javascript:void(0);">Add By Worklot</a></li>
        <li id="nav_VisualAid" class="tabItem"><a href="javascript:void(0);">Add By Visual Aid</a></li>
    </ul>

风格

【问题讨论】：

你能用小提琴重新创建这个吗？

标签： jquery html css

【解决方案1】：

这是specificity 的问题。由于“更具体地”针对元素的其他样式，您的类被覆盖；换句话说：

如果两个选择器适用于同一个元素，则具有较高的特异性获胜。

解决方案很简单，只需使用类navLinkSelected 定位<a> 元素：

a.navLinkSelected { ... }

【讨论】：

【解决方案2】：

你可以在你的 CSS 属性之后尝试!important 或添加这个：

.navLinkSelected:visited {
    color: red;
}

【讨论】：

我很想创建 jsfiddle ;) 你可以看到一个测试页面，jsfiddle.net/9f8bK 似乎 a:visited 优于类选择器规则
我的意思是 .class 与 :visited
是的，但诀窍在于.class:visited > a:visited 因为.class > tagname 在优先级方面。
是的，这就是我创建 jsfiddle 页面的原因，我在您的帖子中点击了 +1，而没有重写相同的内容：)
C'est la French Connection ;-)

【解决方案3】：

在设置值后尝试使用!important。那么之前设置的颜色值就不再使用了……

示例：

color: red !important;

我建议你也使用悬停效果或类似的东西。

您可以使用!important 来避免某些特定元素的全局设置值。
Here一个链接，您可以在其中了解有关!important 的更多信息。

!important 是在 CSS1 中添加的，因此无论新旧浏览器都不会对此有问题。链接 here。还有!important是CSS的基础知识。偷偷地我只在某些情况下使用它，比如在效果中。

【讨论】：

没有。 !important 应该只用于它的用途，而且你会破坏样式表中的自然级联。像这样使用它通常被视为不好的做法。不惜一切代价避免使用此解决方案。见：stackoverflow.com/questions/5701149/…
@filoxo 在您命名的链接中说：您可以避免一些全局 CSS 规则...
是的，但它也列出了一些非常好的反对使用它的理由。 !important 指令用于帮助网页用户处理可能使页面难以使用或阅读的样式表。使用时应牢记这一点，因为您现在可能会阻止残障人士正常使用您的网站。还要引用上面的文章：If you're using it just because you don't understand how specificity works, you're doing it wrong.
在您链接的文章中，它说！重要声明不应使用，除非它们是绝对必要的，在所有其他途径都用尽之后。既然这里不是这样，为什么推荐使用它？
@Andy 你能提供一些其他的解决方案来解决这个问题吗？

【解决方案4】：

如果可以，您应该尝试将包含您通过 jQuery 添加的类的文件添加到包含覆盖它的规则的文件之后。这样您的规则将具有更高的优先级。

<link rel="stylesheet" src="file1.css" />
<link rel="stylesheet" src="file2.css" />

file2 是包含您使用 JQuery 添加的规则的文件

【讨论】：

并非总是如此，例如：带有 id 选择器的规则优先于标签名称的规则