CSS文件中的样式将覆盖页面中应用的样式

Question

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

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

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

我尝试了各种方法但是没有用。我们如何强制将红色用于链接？

参考：

1. How to remove a <style> element with jquery?
2. Is it possible to remove inline styles with jQuery?
3. Styling a:visited links

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>

风格

Answer 1

这是specificity的问题。由于其他针对元素的样式，您的课程正在被覆盖，更具体地说是＃34 ;;换句话说：

  

如果两个选择器适用于同一个元素，那么选择器更高   特异性获胜。

解决方案就像使用类<a>定位navLinkSelected元素一样简单：

a.navLinkSelected { ... }

Answer 2

您可以在CSS属性后尝试!important或添加此属性：

.navLinkSelected:visited {
    color: red;
}

Answer 3

设置值后尝试使用!important。然后，不再使用之前设置的颜色值......

示例：

color: red !important;

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

您可以使用!important来避免某些元素的全局设定值 Here 一个链接，您可以在其中详细了解!important。

在CSS1中添加了

!important，因此没有旧的或新的浏览器有一些问题。链接 here 。而!important也是CSS的基本知识。我秘密地只在某些情况下使用它，例如效果。

Answer 4

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

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

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