主菜单在我的笔记本电脑上可以正常使用，但不能在手机上使用

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

我知道您必须使其兼容不同的格式。我不确定有关修复代码的实际详细信息，但是我不确定它对Wordpress的外观，对不起！

Answer 2

您想要的：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。这将覆盖其他地方编写的任何内容。似乎您还需要在单击最新的导航栏a时从所有其他导航栏中删除.focus。

如果您不希望使用JS，则为避免覆盖CSS，请考虑代码的层次结构和特殊性。我希望下面的代码在您的自定义CSS文件中更加具体。也许像这样：

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