Glyphicon 怪异 link 修饰行为
Glyphicon weird link decoration behavior
有人可以向我解释通过 css 文件设置 'text-decoration: none' 和通过 element.style 设置为 link 之间的区别吗？
演示：
with icons |
with text
当您将鼠标悬停在第一个图标上时（在第一个示例中），您会看到这条小线：
这是一个特殊性问题：标签上的 style 属性优于 a:hover CSS 规则优于 a CSS 规则。关于CSS特异性的教程很多，比如this one on MDN
您只需要一点点修复：
a, a:hover {
text-decoration: none;
}
当涉及到大型复杂网站时会有很大的不同，您想要覆盖和更改已经在 HTML 中内联样式的内容的样式，使用 style=" ...“ 属性。
例如，您希望某些内容在大多数页面上以一种颜色显示，但在一个特定页面上以不同颜色显示，或者在同一页面上再次显示时。许多插件使用内联样式，很难轻松自定义它们。
因为使用 HTML 的内联样式属性的样式几乎具有最高的特异性（如果您愿意，基本上意味着 "strongest power"）。覆盖它的唯一方法是使用 !important，这只会使问题复杂化，因为这会使进一步覆盖变得更加困难。
另一个主要缺点是内联样式使您的 HTML 变得混乱，使其更难维护、编辑和理解 - 这是 CSS 样式表的主要原因，将样式与内容。
有人可以向我解释通过 css 文件设置 'text-decoration: none' 和通过 element.style 设置为 link 之间的区别吗？
演示： with icons | with text
当您将鼠标悬停在第一个图标上时（在第一个示例中），您会看到这条小线：
这是一个特殊性问题：标签上的 style 属性优于 a:hover CSS 规则优于 a CSS 规则。关于CSS特异性的教程很多，比如this one on MDN
您只需要一点点修复：
a, a:hover {
text-decoration: none;
}
当涉及到大型复杂网站时会有很大的不同，您想要覆盖和更改已经在 HTML 中内联样式的内容的样式，使用 style=" ...“ 属性。
例如，您希望某些内容在大多数页面上以一种颜色显示，但在一个特定页面上以不同颜色显示，或者在同一页面上再次显示时。许多插件使用内联样式，很难轻松自定义它们。
因为使用 HTML 的内联样式属性的样式几乎具有最高的特异性（如果您愿意，基本上意味着 "strongest power"）。覆盖它的唯一方法是使用 !important，这只会使问题复杂化，因为这会使进一步覆盖变得更加困难。
另一个主要缺点是内联样式使您的 HTML 变得混乱，使其更难维护、编辑和理解 - 这是 CSS 样式表的主要原因，将样式与内容。