Glyphicon怪异的链接装饰行为

Question

有人可以解释一下通过css文件设置'text-decoration：none'和通过element.style设置链接之间的区别吗？

DEMOS： with icons | with text

当您将鼠标悬停在第一个图标上时（在第一个示例中），您会看到以下小行：

Answer 1

这是一个特殊问题：标签上的style属性胜过a:hover CSS规则胜过a CSS规则。关于CSS特性的教程很多，如this one on MDN

Answer 2

你需要一点修理：

a, a:hover {
    text-decoration: none; 
}

Answer 3

对于大型复杂网站而言，存在很大差异，并且您希望覆盖并更改已在HTML中使用样式内联的内容的样式，使用style =＆＃34; ... ＆＃34;属性。

例如，您希望在大多数页面上以一种颜色显示某些内容，但在一个特定页面上以不同颜色显示，或者在同一页面上第二次显示时显示。很多插件都使用内联样式，因此很难轻松定制它们。

因为使用HTML内联样式属性的样式几乎具有最高的特异性（基本上意味着＆＃34;最强大的力量＆＃34;，如果你愿意的话）。然后，覆盖它的唯一方法是使用！important，这只会使问题复杂化，因为这会使得进一步覆盖更加困难。

另一个主要缺点是内联样式会使HTML变得混乱，从而难以维护，编辑和理解 - 这是CSS样式表的主要原因，即将样式与内容分开。