主菜单在我的笔记本电脑上运行良好，但在手机上却不行

Question

我正在使用 WordPress 建立一个网站。昨天下午一切都很好，然后头球导航突然崩溃了。它首先显示未归因的焦点属性，但通过 a:focus 解决了该问题。它在笔记本电脑上运行良好，但在移动设备上却不行。它在小屏幕上没有活动颜色，但我希望它有。感谢您的帮助！

.site-header .tab a:focus{ 
    color: #FF6508 !important;
    outline:none !important;
}

.site-header .tab a:active{ 
    color: #FF6508 !important;
}

.site-header .tab a:hover{ 
    color: #FF6508 !important;
}

.site-header .tab a:visited{ 
    color: #fff !important;
}

.site-header .tab a:after{ 
    color: #FF6508 !important;
}

@media screen and (max-width: 800px){
.site-header .tab a:link{ 
    color: #fff !important;
}

.site-header .tab a:active{ 
    color: #FF6508 !important;
}
}

Answer 1

你想要的 :active 伪类的颜色正在被

覆盖

@media screen and (max-width: 800px)
.site-header .tab a:link {
    color: #fff;
}
.site-header .tab a:link {
    color: #fff!important;
}

您似乎正在使用 JS 为每个元素添加一个焦点类。您可以使用相同的 JS 将样式 css 添加到您的元素中。这将覆盖其他地方写的任何内容。您似乎还需要在单击最近的导航栏后从所有其他导航栏中删除 .focus。

如果您不想使用 JS，那么为了避免覆盖 CSS，不妨考虑代码的层次结构和特殊性。我会在您的自定义 CSS 文件中以更高的特异性降低以下代码。也许是这样：

.site-header .primary-menu .tab a:active{ 
    color: #FF6508 !important;
}