Shopify店铺激活页面链接添加顶部白边框失败求助

问题核心 #

你用的:active是鼠标点击瞬间的状态，:focus是元素获取焦点时的状态，这俩都不是当前页面导航链接的持久激活状态——Shopify主题通常会给当前页面的导航链接添加.active或.current类来标记激活状态，这才是你需要瞄准的目标。另外也可能是选择器优先级不够，被主题原有样式覆盖。

具体解决方案 #

1. 替换选择器为激活类
   先通过浏览器开发者工具（F12）查看当前页面导航链接的HTML结构，确认激活状态的类名（多数主题用.active），然后修改CSS：

   /* 若激活类直接加在a标签上 */
   #main-header .dropdown.menu > li > a.active {
       border-top: 2px solid #FFF;
       transition: none;
   }
   
   /* 若激活类加在父级li标签上 */
   #main-header .dropdown.menu > li.active > a {
       border-top: 2px solid #FFF;
       transition: none;
   }
   

2. 处理样式覆盖问题
   如果用了上面的代码还是没效果，用开发者工具检查目标链接的border-top样式是否被划掉（说明被高优先级样式覆盖）：

   • 优化选择器提高优先级，比如加上主题的顶级父类（比如.shopify-section #main-header ...）
   • 临时用!important强制覆盖（尽量少用，优先优化选择器）：

     #main-header .dropdown.menu > li.active > a {
         border-top: 2px solid #FFF !important;
         transition: none;
     }
     

3. 确认激活类是否存在
   刷新页面后查看导航链接的HTML，若没有.active类，需要：

   • 检查Shopify后台主题设置，是否开启了导航激活状态的样式开关
   • 若主题没有自带，需通过Liquid代码给当前页面的导航链接手动添加.active类

内容的提问来源于stack exchange，提问作者Adam Bell