我的CSS有啥问题？活动链接不改变颜色

Posted 2023-03-25

【中文标题】我的CSS有啥问题？活动链接不改变颜色

【英文标题】：what is wrong with my css? active links not changing color我的CSS有什么问题？活动链接不改变颜色

【发布时间】：2015-04-17 09:10:24

【问题描述】：

我无法让我的 Wordpress 菜单活动链接保持红色。

我添加了我认为与导航相关的 CSS，以及正文等，以防影响问题。

感谢您的帮助！

body 
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 12px;
    line-height: 18px; 
    color: #000;




/* 
LINKS 
*/

a:link,
a:visited 
    text-decoration: none;
    color: #000;


a:hover 
    text-decoration: none;
    color: #ff0000 ;


a:active 
    color: #ff0000;


h2.entry-title-index a:link,
h2.entry-title-index a:active,
h2.entry-title-index a:visited 
    text-decoration: none;
    color: #ff0000;


h2.entry-title-index a:hover 
    text-decoration: none;
    color: #ff0000;
 

a:active 
    color: #ff0000 !important;


/* 
HEADLINES
*/

h2, #navigation    
    font-family: 'Helvetica Neue', sans-serif;
    margin: 0;
    font-size: 16subpx;
    font-style: normal;
    font-variant: normal;
    font-weight: 450;
    line-height: 18px;


#navigation a:hover::before 
         content: '+ ';


#navigation a:active::before 
         content: '+ ';


#navigation ul a.active 
    color: #ff0000;
    


h2.entry-title, h2.entry-title-index, h2.comment-title 
    margin-top:14px;
    color: #ff0000;


h2.entry-title, h2.comment-title 
/*  margin: 0 0 9px 0; */


h2.entry-title-index 
    line-height: 17px !important;
/*  margin: 9px 0 0 0  !important; */

【问题讨论】：

想要的功能是什么？ :active 状态不会在释放鼠标按钮后持续存在。

基本上，我希望您所在页面的颜色在导航中为红色。

【参考方案1】：

Active 仅在用户单击元素时使用，它并不意味着指示哪个页面处于活动状态。您应该向活动导航项添加一个类并设置该类的样式。

来源：http://css-tricks.com/almanac/selectors/a/active/

【讨论】：

哦，大声笑..谢谢！但是向活动链接添加一个类会改变什么吗？即：.active a:active color #ff0000;

您将向活动链接添加一个类，因此您的 css 选择器应变为 a.active（ 类活动）

【参考方案2】：

这样不行，你需要用服务器端语言或者js设置活动的class或者id，然后你就可以指示活动页面了。

【讨论】：

好的..我可以使用服务器端语言或 js 脚本的任何想法？