为什么Elements面板的Styles区域不显示text-decoration: underline属性？

1. 优先修复控制台报错 #

你遇到的样式规则不显示、下划线来源查不到的问题，和控制台报错直接相关：

• 如果是CSS资源加载报错，会导致你写的自定义样式表没有被浏览器正常加载，Styles面板自然不会显示对应规则
• 如果是JS操作DOM/样式的报错，可能是动态给元素加了异常样式，或是元素渲染逻辑出错

2. 通用去下划线方案 #

不需要先定位来源也可以直接清除下划线，给按钮添加如下样式即可：

/* 把下方的.target-button替换成你实际的按钮选择器，比如.button类、button标签、a.btn类 */
.target-button {
  text-decoration: none !important;
  text-decoration-line: none !important;
  /* 如果下划线还存在，加下一行排查是否是边框模拟的下划线 */
  border-bottom: none !important;
}

如果你的按钮是用<a>标签模拟的，本身默认user agent样式就带text-decoration: underline规则，你之前误查看了html根元素的user agent样式，才会找不到对应规则。

3. 定位下划线来源的方法 #

如果需要找到具体根源，按以下步骤操作：

• 在Elements面板选中带下划线的按钮元素，在Styles面板的过滤器输入框中直接输入text-decoration，即可过滤出所有和该属性相关的生效规则，包括从父元素继承来的样式（很多时候下划线是父元素设置后继承给按钮的，所以按钮自身的规则里不会显示）
• 如果过滤后无相关规则，直接输入border排查是否是用底部边框模拟的下划线效果

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