Html CSS / Bootstrap 3：从链接中删除样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25198838/
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
CSS / Bootstrap 3: remove styling from links
提问by user2571510
I am trying to remove styling from links (anchor tags) in the following lines so that the links appear with black color and no underlining by default. For some reason my CSS class ("deco-none") is ignored here and they still appear in blue as normal links (I am using IE9 and Bootstrap 3).
我试图从以下几行中的链接（锚标记）中删除样式，以便链接显示为黑色，默认情况下没有下划线。出于某种原因，我的 CSS 类 (" deco-none") 在这里被忽略，它们仍然作为普通链接显示为蓝色（我使用的是 IE9 和 Bootstrap 3）。
What do I have to change here ?
我在这里需要改变什么？
My HTML:
我的 HTML：
<div class="row" style="width:400px;">
<ul class="list-unstyled col-md-4">
<li class="bg-menu clickable"><a href="#" class="deco-none">test1-1</a></li>
<li class="bg-menu clickable"><a href="#" class="deco-none">test1-2</a></li>
<li class="bg-menu clickable"><a href="#" class="deco-none">test1-3</a></li>
</ul>
<ul class="list-unstyled col-md-4">
<li class="bg-menu clickable"><a href="#" class="deco-none">test2-1</a></li>
<li class="bg-menu clickable"><a href="#" class="deco-none">test2-2</a></li>
<li class="bg-menu clickable"><a href="#" class="deco-none">test2-3</a></li>
</ul>
<ul class="list-unstyled col-md-4">
<li class="bg-menu clickable"><a href="#" class="deco-none">test3-1</a></li>
<li class="bg-menu clickable"><a href="#" class="deco-none">test3-2</a></li>
<li class="bg-menu clickable"><a href="#" class="deco-none">test3-3</a></li>
</ul>
</div>
My CSS:
我的CSS：
a.deco-none: {
color:#000000 !important;
text-decoration:none;
}
.bg-menu:hover {
background-color:#0079C1;
color:#FFFFFF;
}
.clickable {
cursor:pointer;
}
采纳答案by Richa
You got it wrong in CSS. Try this
你在 CSS 中弄错了。尝试这个
a.deco-none {
color:#000000 !important;
text-decoration:none;
}
.bg-menu:hover {
background-color:#0079C1;
color:#FFFFFF;
}
.clickable {
cursor:pointer;
}
Below code is wrong
下面的代码是错误的
a.deco-none: {
color:#000000 !important;
text-decoration:none;
}
回答by Carlos Araya
I would suggest to use the inheritkeyword to inherit the parents color. I know you wanted them black, but I'm sure that other users will find it helpful.
我建议使用inherit关键字来继承父颜色。我知道您希望它们是黑色的，但我相信其他用户会发现它很有帮助。
a.deco-none {
color: inherit;
text-decoration:none;
}
as Dimitry Ksaid, you had the a.deco-none:typo.
正如Dimitry K所说，你a.deco-none:打错了。
回答by Markus
To make it complete (does not change colour on hover or after clicking it and inherits text-decoration, too):
使其完整（在悬停时或单击后不改变颜色并继承text-decoration）：
.deco-none {
color: inherit;
text-decoration: inherit;
}
.deco-none:link {
color: inherit;
text-decoration: inherit;
}
.deco-none:hover {
color: inherit;
text-decoration: inherit;
}
Example Snippet
示例代码段
.deco-none {
color: inherit;
text-decoration: inherit;
}
.deco-none:link {
color: inherit;
text-decoration: inherit;
}
.deco-none:hover {
color: inherit;
text-decoration: inherit;
}
.bg-menu:hover {
background-color: #0079C1;
color: #FFFFFF;
}
.clickable {
cursor: pointer;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row" style="width:400px;">
<ul class="list-unstyled col-md-4">
<li class="bg-menu clickable"><a href="#" class="deco-none">test1-1</a>
</li>
<li class="bg-menu clickable"><a href="#" class="deco-none">test1-2</a>
</li>
<li class="bg-menu clickable"><a href="#" class="deco-none">test1-3</a>
</li>
</ul>
<ul class="list-unstyled col-md-4">
<li class="bg-menu clickable"><a href="#" class="deco-none">test2-1</a>
</li>
<li class="bg-menu clickable"><a href="#" class="deco-none">test2-2</a>
</li>
<li class="bg-menu clickable"><a href="#" class="deco-none">test2-3</a>
</li>
</ul>
<ul class="list-unstyled col-md-4">
<li class="bg-menu clickable"><a href="#" class="deco-none">test3-1</a>
</li>
<li class="bg-menu clickable"><a href="#" class="deco-none">test3-2</a>
</li>
<li class="bg-menu clickable"><a href="#" class="deco-none">test3-3</a>
</li>
</ul>
</div>