Html “文本装饰：无”在 Bootstrap 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10391177/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
'Text-decoration: none' not working in Bootstrap
提问by Olly F
On hover, my text links have underlines. This is the default in Bootstrap.
悬停时，我的文本链接有下划线。这是 Bootstrap 中的默认设置。
I want to keep this, unless the link is within a certain div.
我想保留这个，除非链接在某个 div 内。
The code I have tried (and several variations) doesn't work.
我尝试过的代码（和几个变体）不起作用。
The HTML:
HTML：
<div class="wall-entry span5">
<a href="">
<img src="http://www.placehold.it/290x163" />
<div class="wall-address">
<p>Burgundy Street</p>
<p>New Orleans, LA</p>
<p>USA</p>
</div>
</a>
</div>
My CSS:
我的CSS：
.wall-entry {
background-color: @black;
position: relative;
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
div {
position: absolute;
left: 10px;
bottom: 10px;
p {
line-height: 18px;
margin: 0;
font-family: Neuzit Heavy;
font-size: 18px;
color: white;
text-decoration: none;
}
}
}
div.wall-entry:hover img {
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
a div.wall-entry {text-decoration: none;}
A quick note: I have tested a {text-decoration: none;}, this does work. However, I don't want to change everything. Just the links in this specific case.
快速说明：我已经测试过a {text-decoration: none;}，这确实有效。然而，我不想改变一切。只是这个特定案例中的链接。
回答by Tallboy
put the font-family in quotes for fonts that involve multiple words, first of all:
将字体系列放在涉及多个单词的字体的引号中，首先：
font-family: "Neuzit Heavy", sans-serif;
font-family: "Neuzit Heavy", sans-serif;
then beneath aput .wall-entry a:hover { text-decoration: none; }
然后下面a放.wall-entry a:hover { text-decoration: none; }
You have the order switched around. The item you're targeting should be to the right. For example,
你已经改变了顺序。您定位的项目应该在右侧。例如，
.wrapper .header ain english means "Target all anchor links that are inside of .header, that are inside of .wrapper"
.wrapper .header a英文的意思是“定位在 .header 内部的所有锚链接，在 .wrapper 内部”
回答by Cameron Newland
The problem is actually a caused by Twitter Bootstrap's CSS file, not your code.
问题实际上是由 Twitter Bootstrap 的 CSS 文件引起的，而不是您的代码。
Twitter Bootstrap's CSS file (bootstrap.min.css was the culprit on my project) gives links underlines multiple times. It gives them an underline when they're hovered over, when they're focused on, and it even makes them blue.
Twitter Bootstrap 的 CSS 文件（bootstrap.min.css 是我项目的罪魁祸首）多次提供链接下划线。当他们将鼠标悬停在上方时，当他们专注于他们时，它会给他们一个下划线，甚至使他们变成蓝色。
In my project, I specifically assigned my own colors to the text that was inside anchor tags, and the browser rendered their colors correctly, just as I assigned them, however, since the text was wrapped in an anchor tag, the blue underline from the Twitter Bootstrap stylesheet still appeared below all my styled text.
在我的项目中，我专门为锚标签内的文本分配了我自己的颜色，并且浏览器正确地呈现了它们的颜色，就像我分配它们一样，但是，由于文本被包裹在锚标签中，来自锚标签的蓝色下划线Twitter Bootstrap 样式表仍然出现在我所有样式文本的下方。
My solution: open bootstrap.min.css (or whatever your Bootstrap stylesheet is called) and search for the term 'underline', and whenever you find 'text-decoration: underline' inside an anchor tag selector, like this:
我的解决方案：打开 bootstrap.min.css（或任何您的 Bootstrap 样式表）并搜索术语“下划线”，并且每当您在锚标记选择器中找到“文本装饰：下划线”时，如下所示：
a:hover, a:focus {
color: #2a6496;
text-decoration: underline;
}
or this:
或这个：
a, a:visited {
text-decoration: underline;
}
you should go ahead and remove the color and text-decoration rules.
您应该继续删除颜色和文本装饰规则。
That solved my problem.
那解决了我的问题。
回答by Genia
If your link is inside div tags, then you can select your link this way:
如果您的链接在 div 标签内，那么您可以通过以下方式选择链接：
div > a:hover {
text-decoration:none;
}
It works fine, even with boostrap used.
即使使用了 boostrap，它也能正常工作。
回答by The Alpha
This won't work
这行不通
a div.wall-entry {text-decoration: none;} // Inside 'a' div with class wall-entry
but this will work.
但这会起作用。
div.wall-entry a{text-decoration: none;} // Inside div with class wall-entry 'a'
because an atag has text-decoration.
因为一个a标签有text-decoration.
