Html 如何更改列表中锚标记的颜色以在已设置为另一种颜色时处于活动状态？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18502750/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the color of an anchor tag in a list for being active while already set to another color?
提问by Cyrus
I have already set the text color of anchor tag in a list as BLACK in the CSS file. Now I want to declare a list item as active and change its text color, but it doesn't work. Help please!
我已经在 CSS 文件中将列表中锚标记的文本颜色设置为黑色。现在我想将一个列表项声明为活动状态并更改其文本颜色，但它不起作用。请帮忙！
Here's the preset color:
这是预设颜色：
#already-set li a
{
font: normal 14px Arial;
border-top: 1px solid #ccc;
display: block;
color: black;
text-decoration: none;
line-height:26px;
padding-left:5px;
}
And here's the code to change active list item color:
这是更改活动列表项颜色的代码：
a#active
{
background-color: #d11250;
color: white;
font-weight:bold;
}
And here's my HTML:
这是我的 HTML：
<ul id="already-set">
<li><a href="#" id="active"> List Item </a></li>
</ul>
回答by Thanos
You are getting confused with the a:active.
你对a:active.
Please check this EXAMPLEwhich will make it a bit more clear. I have added jQuery to change the active element on the fly when clicked.
请检查此示例，这将使它更清楚一些。我添加了 jQuery 以在单击时动态更改活动元素。
$(function() {
$("a").click(function() {
// remove classes from all
$("a").removeClass("active");
// add class to the one we clicked
$(this).addClass("active");
});
});#already-set li a {
font: normal 14px Arial;
border-top: 1px solid #ccc;
display: block;
color: black;
text-decoration: none;
line-height: 26px;
padding-left: 5px;
}
a.active {
background-color: #d11250;
color: white;
font-weight: bold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="already-set">
<li><a href="#"> List Item 1</a>
</li>
<li><a href="#" class="active"> List Item 2</a>
</li>
<li><a href="#"> List Item 3</a>
</li>
</ul>The text color remains black because of the css in the list. If you want to change the text color to white in the selected element please make the following change as the EXAMPLE 2
由于列表中的 css，文本颜色保持黑色。如果要将所选元素中的文本颜色更改为白色，请按照示例 2进行以下更改
Change a.activeto #already-set li a.active.
更改a.active为#already-set li a.active。
回答by Sharath Daniel
Change a#activeto a:activethis will solve your problem.
变更a#active至a:active这将解决你的问题。
