如何修改Bootstrap中汉堡菜单图标的线条颜色？

• 精准定位DOM元素
  打开浏览器开发者工具（F12），选中汉堡图标的线条元素，确认它的实现结构：是用<span>标签，还是按钮的伪元素（::before/::after）做的？常见结构示例：

  <!-- 基于span的汉堡图标 -->
  <div class="hamburger">
    <span></span>
    <span></span>
    <span></span>
  </div>
  
  <!-- 基于伪元素的汉堡图标 -->
  <button class="hamburger-btn"></button>
  

• 编写高优先级媒体查询样式
  针对中等及更小屏幕（以768px为分界示例），写出精准覆盖的CSS：

  • 如果是span结构：

    @media (max-width: 768px) {
      /* 选择器层级要和原有样式一致或更高，确保能覆盖 */
      .hamburger span {
        background-color: #ff4400; /* 替换成你需要的颜色 */
      }
    }
    

  • 如果是伪元素结构：

    @media (max-width: 768px) {
      .hamburger-btn,
      .hamburger-btn::before,
      .hamburger-btn::after {
        background-color: #ff4400;
        /* 前后线条是伪元素，中间线条是按钮自身背景的话，一起设置 */
      }
    }
    

• 排查样式失效核心原因

  1. 选择器优先级不够：如果你的样式在开发者工具里被划掉，说明原有样式的选择器层级更高，比如原有样式是.header .hamburger span，你就得用相同层级的选择器去覆盖。
  2. 用错样式属性：如果线条是靠border实现的，要改border-color而非background-color；如果是color配合边框实现，就调整color值。
  3. 其他属性干扰：检查是否有opacity、filter这类属性影响颜色显示，或是父元素的color继承导致异常。

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