如何更改bootstrap css中的活动链接颜色？

Question

我正在使用joomla 3和bootstrap.min.js我正在创建菜单并提供特殊类以更改悬停,活动,访问过的链接和菜单样式.我找不到如何更改菜单的活动链接颜色.假设我有2个菜单.家和联系.当我在家里它是红色的,我想改变这种颜色.我可以改变:主动和a:悬停.这是代码;

.topmenu .active a,
.topmenu .active a:hover {
    background-color: white;
}
.topmenu > li > a{
    color: orange;
    font-weight:bold;
}
.topmenu > li > a:hover {
    color: black;
    background:white;
} 

甚至我用div来改变活动链接的颜色.这是代码

#top-menu a{
background-color: white;
color: orange;
font-weight:bold;
}
#top-menu a:focus
{
    color: orange;
}
#top-menu a:hover{
    color: black;
}

每次当我点击回家时,它都会激活并且颜色为红色.我想把它变成橙色.找不到怎么做.

这是我的标记代码

<div id="top-menu">
<ul class="nav menu nav-pills topmenu">
<li class="item-109 current active"><a href="/joomla3/">Home</a></li>
<li class="item-138"><a href="/joomla3/?Itemid=138"> Russian </a></li>
<li class="item-110"><a href="/joomla3/?Itemid=110"></a></li></ul>
</div>

你建议我做什么？

Answer 1

最后通过实验我发现了如何捕获它.

#top-menu .current a
{
    color: orange !important;
}

谢谢大家的时间和帮助.非常感激!

Answer 2

我建议您ID (#)在本地为Div包含a链接的选择器创建一个选择器,然后id在样式表中取出该名称并覆盖现有规则.

例如,

#abc a{xxx:xxx;}
#abc a:active{xxx:xxx;}

希望这可以帮助.

Answer 3

为了做你想做的事情,你必须先了解 a:hover必须 在a:link和a:在CSS定义中访问才能生效.如果他们不按此顺序,那么他们将无法工作.

其次,你必须明白,如果你在思考(a:active)意味着最终用户所在的当前链接的颜色,这是不正确的.(a:活动)在您单击链接时更改颜色.您可以通过按住与(a:active)不同颜色的链接上的鼠标按钮进行测试.

最后,如果您尝试仅使用CSS执行此操作,则必须在最终用户所在的当前链接上添加特定类.下面我给你留下了一个例子希望这有助于:)

导航栏如下
-首页
-俄罗斯
-意大利

我们在意大利页面上这个例子:

/*YOUR CSS SHOULD LOOK LIKE THIS*/

/* unvisited link grey */
#top-menu a:link {
	color: #777;
}
/* visited link grey */
#top-menu a:visited {
	color: #777;
}
/* mouse over link blue */
#top-menu a:hover {
	color: #0CF;
}
/* selected link blue */
#top-menu a:active {
	color: #0CF;
}
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a {
	color: #0CF !important
}

<div id="top-menu">
  <ul class="nav menu nav-pills topmenu">
    <li><a href="http://yourdomain.com/page1.html">Home</a></li>
    <li><a href="http://yourdomain.com/page2.html">Russian</a></li>
    <li class="activePage"><a href="http://yourdomain.com/page3.html">Italy</a></li><!--Page End User Is On-->
    <!--Look UP ^^^^^^^^ Hope this helps :)-->
  </ul>
</div>

注意我没有把.activePage标签放在其他链接中？这样做是允许您在导航栏的CSS中选择的原始颜色仍然发生,而活动的页面保持不变的颜色.

这个工作的原因是因为我在这个单独的类的颜色的末尾添加了!important.

.activePage {
  color: #0CF !important
}

因此,要将相同的技术应用于其他页面,它将看起来像这样:

主页

/*YOUR CSS SHOULD LOOK LIKE THIS*/

/* unvisited link grey */
#top-menu a:link {
	color: #777;
}
/* visited link grey */
#top-menu a:visited {
	color: #777;
}
/* mouse over link blue */
#top-menu a:hover {
	color: #0CF;
}
/* selected link blue */
#top-menu a:active {
	color: #0CF;
}
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a {
	color: #0CF !important
}

<div id="top-menu">
  <ul class="nav menu nav-pills topmenu">
    <li class="activePage"><a href="http://yourdomain.com/page1.html">Home</a></li>
    <li><a href="http://yourdomain.com/page2.html">Russian</a></li>
    <li><a href="http://yourdomain.com/page3.html">Italy</a></li>
  </ul>
</div>

我希望我能给你一个坚实的答案,因为我讨厌它,当我看到整个网络,无法真正找到我想要的答案.