WooCommerce Storefront激活导航菜单颜色修改无效，如何修复？

问题描述 #

我的网站是graceamaron.com，为WordPress托管站点。我已通过以下CSS将WooCommerce Storefront主题的主导航菜单hover颜色从默认改为#4fff51：

.storefront-primary-navigation ul li a:hover { color : #4fff51; }

随后尝试用以下代码修改当前激活菜单的颜色：

.storefront-primary-navigation ul li a:active { color : #4fff51; }

但该代码未生效，请问该如何修复？

解决方案 #

你用的:active是CSS伪类，仅对应元素被点击的瞬间状态，而Storefront主题会给当前页面的激活菜单项所在的<li>标签添加current-menu-item类，之前的选择器匹配不到目标元素，所以代码无效。

正确的CSS代码 #

直接针对current-menu-item类编写样式即可：

.storefront-primary-navigation ul li.current-menu-item a {
    color: #4fff51;
}

优先级不足的处理 #

如果上述代码仍不生效，可能是原有主题样式的优先级更高，可通过增加父选择器提升权重（尽量避免使用!important，仅在必要时添加）：

.site-header .storefront-primary-navigation ul li.current-menu-item a {
    color: #4fff51;
}

内容的提问来源于stack exchange，提问作者Prabhu Paul