CSS中display:none与visibility属性失效问题求助

网站首页有一组横向排列的链接列表，想要实现响应式布局——屏幕尺寸过小（比如移动端）时，链接改为垂直堆叠显示。于是在HTML里写了两份链接：一份默认横向显示，另一份用于移动端垂直显示，打算通过display:none和visibility:hidden控制两者显示状态，但设置没生效，移动端的无序列表链接无法正常显示。

相关代码 #

CSS代码 #

#promo-links {
  visibility: hidden;
}

@media (max-width: 324px) {
  rs-layer#slider-5-slide-6-layer-7.rs-layer {
    display:none;
  }

  #promo-links {
    visibility: visible !important;
    display: block !important;
  }
}

HTML代码 #

<a href="https://charismahomedecor.com/product-category/vases">Vases</a> | <a href="https://charismahomedecor.com/product-category/pillows">Pillows</a> | <a href="https://charismahomedecor.com/product-category/switch-plate-covers">Switch Plate Covers</a> | <a href="https://charismahomedecor.com/product-category/ornaments">Ornaments</a>

<div id="promo-links">
  <ul>
    <li><a href="https://charismahomedecor.com/product-category/vases">Vases</a></li>
    <li><a href="https://charismahomedecor.com/product-category/pillows">Pillows</a></li>
    <li><a href="https://charismahomedecor.com/product-category/switch-plate-covers">Switch Plate Covers</a></li>
    <li><a href="https://charismahomedecor.com/product-category/ornaments">Ornaments</a></li>
  </ul>
</div>

目前移动端版本的无序列表项仍无法显示，display或visibility样式未起作用。

排查与解决思路 #

• 检查样式优先级冲突：打开浏览器开发者工具（F12），选中#promo-links元素，查看Styles面板的样式继承情况，确认是否有其他更高优先级的规则（比如内联样式、嵌套更深的选择器）强制隐藏了该元素。
• 调整媒体查询断点：324px的断点过小，主流移动端屏幕宽度大多超过这个值，建议将断点改为max-width: 768px，覆盖平板及以下设备。
• 简化布局逻辑（推荐）：无需编写双份链接，直接对同一组链接做响应式处理更高效：
  1. 给横向链接套一个容器：

     <div class="link-group">
       <a href="...">Vases</a>
       <span class="divider">|</span>
       <a href="...">Pillows</a>
       <span class="divider">|</span>
       <a href="...">Switch Plate Covers</a>
       <span class="divider">|</span>
       <a href="...">Ornaments</a>
     </div>
     

  2. 基础样式设置横向排列：

     .link-group a {
       display: inline-block;
       margin: 0 8px;
     }
     .link-group .divider {
       display: inline-block;
     }
     

  3. 移动端切换为垂直排列：

     @media (max-width: 768px) {
       .link-group a {
         display: block;
         margin: 8px 0;
       }
       .link-group .divider {
         display: none;
       }
     }
     

• 统一隐藏控制方式：避免同时混用visibility和display，初始状态用display:none隐藏移动端列表，媒体查询中用display:block显示，减少属性冲突概率。

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