QUESTION：
为什么 Bootstrap 不删除带有其text-decoration: none的超链接下划线？
故障：
默认情况下，Bootstrap 为所有超链接提供text-decoration: none低特异性 CSS 的超链接：
a {
text-decoration: none;
}
但是，这实际上并没有从超链接中删除默认下划线：
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<a href="#">Should have no text-decoration</a> (through Bootstrap)
</body>没有比text-decoration: none更高的特异性规则了.事实上，根本没有其他规则影响文本装饰。当删除 Bootstrap 并在其位置添加相同的 CSS 时，文本修饰将被删除：
a {
text-decoration: none;
}<a href="#">Should have no text-decoration</a> (inline)Bootstrap似乎也对这种行为具有"优先级";当您将上述 CSS 与 Bootstrap 结合使用时，您的声明是否具有更具体性并不重要;链接仍将带有下划线：
a, div a {
text-decoration: none;
}<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<a href="#">Bootstrap has higher specificity</a>
<div>
<a href="#">Inline CSS has higher specificity</a>
</div>
</body>有趣的是，添加!important会删除修饰，即使没有"更具体"的声明：
a {
text-decoration: none !important;
}<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<a href="#">!important</a>
</body>那么为什么 Bootstrap 在实现text-decoration: none时不删除默认超链接下划线呢？
我假设您将鼠标悬停在链接上时指的是下划线，因为这是唯一似乎不起作用的东西。
答案很简单：您不是以悬停状态为目标。通常还建议处理焦点状态，以便进行键盘导航。试试这个...
a, a:hover, a:focus {
text-decoration: none;
}
不管你怎么说，你的项目中有一个CSS规则覆盖了Bootstrap的text-decoration: none。演示代码中的链接行为正常。
可能是您的浏览器设置
如果在其他浏览器上加载页面可以解决问题，则情况就是如此。某些浏览器允许用户覆盖特定的 CSS 样式。
它可能是另一个 CSS 文件
在谷歌浏览器上加载页面。右键单击链接，然后单击"检查元素"。您将看到所有有效的 CSS 规则，包括阻止引导程序text-decoration: none工作的规则。