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;
}

主菜单可以在笔记本电脑上正常工作，但不能在手机上工作

1 个答案: