Question

问题：

为什么Bootstrap不会删除带有text-decoration: none的超链接下划线？

BREAKDOWN：

默认情况下，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的实现？

Answer 1

我假设您将鼠标悬停在链接上时指的是下划线，因为这是唯一似乎无法正常工作的内容。

答案很简单：您没有针对悬停状态。对于键盘导航，通常也建议处理焦点状态。试试这个......

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

Answer 2

尽管你说的是，你的项目中有一条CSS规则，它超越了Bootstrap的text-decoration: none。演示代码中的链接表现正常。

可能是您的浏览器设置

如果在不同的浏览器上加载页面修复了问题，就是这种情况。有些浏览器允许用户覆盖特定的CSS样式。

它可能是另一个CSS文件

在Google Chrome上加载页面。右键单击该链接，然后单击＆＃34; Inspect Element＆＃34;。您将看到所有有效的CSS规则，包括阻止Bootstraps text-decoration: none工作的规则。

为什么Bootstrap的文本修饰：没有用？

2 个答案:

可能是您的浏览器设置

它可能是另一个CSS文件