css - 使用 Bootstrap 时如何取消锚定样式

Question

Bootstrap 为 anchor 添加了非常漂亮的默认样式，但使用起来很困难 <a>标记蓝色文本以外的东西。说，我希望文字是黑色的。一种方法是添加 class="my_class"到 anchor 标签，然后放a.my_class{color:black}规则。

但我很快就会意识到 bootstrap 也为 :hover 添加了样式.所以，我也必须改变它。它还更改了 outline 的样式, text-decoration , :focus等

当然，我可以只阅读未缩小版本的 bootstrap.css 并尝试了解我必须涵盖的所有情况，以确保它保持黑色。但我认为必须有一些更简单的方法 - 我期待像添加 class="link-unstyled" 这样的东西还是什么？

Answer 1

甚至晚些时候，但对于普通文本链接(在 p 等内)有一个更短的解决方案:

.link-unstyled, .link-unstyled:link, .link-unstyled:hover {
  color: inherit;
  text-decoration: inherit;
}

我的测试表明，使用 :link 时，悬停时或单击后的所有特殊样式都会被删除。

编辑 22.11.2015:某些用例仍然需要 :hover，例如在以下代码段中。更新了上面的 css。

.link-unstyled, .link-unstyled:link, .link-unstyled: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="link-unstyled">test1-1</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="link-unstyled">test1-2</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="link-unstyled">test1-3</a>
    </li>
  </ul>
  <ul class="list-unstyled col-md-4">
    <li class="bg-menu clickable"><a href="#" class="link-unstyled">test2-1</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="link-unstyled">test2-2</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="link-unstyled">test2-3</a>
    </li>
  </ul>
  <ul class="list-unstyled col-md-4">
    <li class="bg-menu clickable"><a href="#" class="link-unstyled">test3-1</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="link-unstyled">test3-2</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="link-unstyled">test3-3</a>
    </li>
  </ul>
</div>