为什么Bootstrap的text-decoration:none不起作用? [英] Why does Bootstrap's text-decoration:none not work?
问题描述
问题:
为什么Bootstrap不删除带有text-decoration: none的超链接下划线?
Why does Bootstrap not remove hyperlink underlines with its text-decoration: none?
BREAKDOWN:
默认情况下，Bootstrap使用低特异性CSS为所有超链接提供text-decoration: none:
By default, Bootstrap gives all hyperlinks text-decoration: none with the low-specificity CSS:
a {
text-decoration: none;
}
但是，这实际上并没有从超链接中删除默认的下划线:
However, this doesn't actually remove the default underline from hyperlinks:
<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时，将删除文本装饰 :
There are no rules with higher specificity than text-decoration: none. In fact, there are no other rules affecting text-decoration at all. When Bootstrap is removed, and the same CSS is added in its place, the text-decoration is removed:
a {
text-decoration: none;
}
<a href="#">Should have no text-decoration</a> (inline)
Bootstrap似乎也将这种行为视为优先"事项；当您将上述CSS与Bootstrap结合使用时，声明是否具有更高的特异性都无关紧要；链接仍会带有下划线:
Bootstrap also seems to take 'priority' with this behaviour; when you use the above CSS in conjunction with Bootstrap, it doesn't matter whether your declaration has more specificity or not; links will still be underlined:
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也会删除修饰符:
It's interesting to note that adding !important removes the decoration, even though there are no 'more specific' declarations:
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删除默认的超链接下划线?
So why does Bootstrap not remove the default hyperlink underline with its implementation of text-decoration: none?
推荐答案
我认为当您将鼠标悬停在链接上时，您指的是下划线，因为这似乎是唯一不起作用的东西.
I assume you're referring to the underline when you hover over the link, since that is the only thing that seems to not be working.
答案很简单:您没有针对悬停状态.通常还建议您将焦点状态也用于键盘导航.试试这个...
The answer is simple: you are not targeting the hover state. It's also usually recommended to treat the focus state as well, for keyboard navigation. Try this...
a, a:hover, a:focus {
text-decoration: none;
}
这篇关于为什么Bootstrap的text-decoration:none不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
