Obs*_*Age 3 css twitter-bootstrap twitter-bootstrap-3
题：
为什么 Bootstrap 不使用其删除超链接下划线text-decoration: none？
分解：
默认情况下，Bootstrap 提供所有text-decoration: none具有低特异性 CSS 的超链接：
a {
text-decoration: none;
}
但是，这实际上并没有从超链接中删除默认下划线：
a {
text-decoration: none;
}
没有比 具有更高特异性的规则text-decoration: none。事实上，不存在影响在文本修饰没有其他规则所有。移除 Bootstrap 并在其位置添加相同的 CSS 后，文本装饰将被移除：
<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>a {
text-decoration: none;
}Bootstrap 似乎也对这种行为采取了“优先考虑”；当您将上述 CSS 与 Bootstrap 结合使用时，您的声明是否具有更多特异性并不重要；链接仍将带有下划线：
<a href="#">Should have no text-decoration</a> (inline)a, div 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="#">Bootstrap has higher specificity</a>
<div>
<a href="#">Inline CSS has higher specificity</a>
</div>
</body>a {
text-decoration: none !important;
}那么为什么 Bootstrap 不删除默认超链接下划线及其实现text-decoration: none？
我假设您将鼠标悬停在链接上时指的是下划线，因为这是唯一似乎不起作用的东西。
答案很简单：您不是针对悬停状态。通常还建议将焦点状态也用于键盘导航。尝试这个...
a, a:hover, a:focus {
text-decoration: none;
}
| 归档时间： |
|
| 查看次数： |
8614 次 |
| 最近记录： |