移动端菜单链接下划线去除问题：初始display:none元素样式失效？

嘿，我来帮你搞定这个烦人的下划线问题！先梳理下你遇到的核心问题，再一步步给你解决办法：

首先，找出问题根源 #

你之前尝试的CSS选择器写反了！看你的HTML结构：

<a href='...'><div class='toolbarbutton'>Home</div></a>

是a标签包裹着带.toolbarbutton类的div，而不是.toolbarbutton里面包含a。所以你写的.toolbarbutton a{}根本找不到对应的元素，自然不会生效。另外，你拼接的HTML字符串里还有个小错误：Locations对应的a标签没闭合，这会导致DOM结构错乱，也可能影响样式应用。

解决方案步骤 #

1. 修正HTML结构错误
   把你buttonsmob里未闭合的a标签补上：

   var buttonsmob = `
    <span id='toolbar' style='display:none;'>
    <a href='https://www.home.com'><div class='toolbarbutton'>Home</div></a>
    <a href='Locations.php'><div class='toolbarbutton'>Locations</div></a> <!-- 补上闭合标签 -->
    <a href='ContactUs.php'><div class='toolbarbutton'>Contact Us</div></a>
    <div onclick='closemenu()' class='toolbarbutton'>Close Menu</div>
    </span>`;
   

2. 用正确的CSS选择器去除下划线
   直接针对#toolbar里的所有a标签设置样式，不管元素是否显示，样式都会生效（display:none只是隐藏元素，不会让样式失效）：

   #toolbar a {
     text-decoration: none;
     /* 可选：加上这个让链接文字颜色和父元素一致，避免默认蓝色 */
     color: inherit;
   }
   
   /* 保留你原本的.toolbarbutton样式 */
   .toolbarbutton {
     /* 你的现有样式，比如 padding、背景色、字体大小等 */
   }
   

3. 为什么之前的JS尝试无效？
   你写的document.getElementById('toolbar').style.text-decoration='none';本身有语法错误——JS里的样式属性是驼峰式命名，应该写成textDecoration，但其实完全没必要用JS来设置这个样式，CSS是更可靠的方式。

验证效果 #

做完上面两步后，点击菜单按钮显示toolbar时，里面的链接下划线应该就消失了。如果还有问题，可以检查下有没有其他CSS规则（比如a:hover）覆盖了这个样式，只需在选择器后面加!important临时排查（不推荐长期使用，最好调整选择器优先级），比如：

#toolbar a {
  text-decoration: none !important;
}

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