问题:
为什么 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;
}
关于twitter-bootstrap - 为什么Bootstrap的text-decoration :none not work?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42965803/