Question

Bootstrap为锚点添加了非常好的默认样式，但是它使得<a>标记很难用于蓝色文本之外的其他内容。说，我希望文本是黑色的。一种方法是将class="my_class"添加到锚标记，然后添加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。

＆＃13;

.link-unstyled, .link-unstyled:link, .link-unstyled:hover {
  color: inherit;
  text-decoration: inherit;
}
.bg-menu:hover {
  background-color: #0079C1;
  color: #FFFFFF;
}
.clickable {
  cursor: pointer;
}

＆＃13;

<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>

＆＃13;

Answer 2

以下是一个实例：http://jsfiddle.net/S9JXC/12/ 您可以设置单个元素或一组元素的样式。在这种情况下，它们会覆盖bootstrap.css定义的样式，这些样式在这些样式之前加载并优先使用。

bootstrap.css定义的样式

a {
    color: #428BCA;
    text-decoration: none;
}

a:hover, a:focus {
    color: #2A6496;
    text-decoration: underline;
}

自定义样式

.style-1 {
    color: red;
}
.style-1:hover, 
.style:focus {
    color: darkred;
}
.style-2 a {
    color: #9F5F9F;
    text-decoration: underline;
}
.style-2 a:hover,
.style-2 a:focus {
    color: #871F78;
}

<a href="#">Link</a><br>
<a href="#" class="style-1">Link with a different style</a>

<div class="style-2">
    <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>

Answer 3

遇到这个问题虽然Jeroen的答案非常全面，但也很长。

如果我希望这个标签具有正常的标签文字颜色，我只需要两个新的CSS规则。

a.unlink {
  color: inherit;
}
a.unlink:hover {
  color: inherit;
}

如果你看一下我的片段，就可以看出差异。

＆＃13;

a.unlink {
  color: inherit;
}
a.unlink:hover {
  color: inherit;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<span class="label label-primary"><a class="unlink" href="#">Good looking tag</a></span> <-- This looks good
<br />
<span class="label label-primary"><a href="#">Bad looking tag</a></span> <-- This looks bad

＆＃13;

Answer 4

我迟到了，但是仍然希望提供另一个答案来直接解决问题中的一些问题，并提供我自己的解决方案FWIW。

一些一般要点

我期待添加class="link-unstyled"或其他内容？

我也是。显然它不存在。

当然我可以阅读bootstrap.css的未经授权的版本[...]但是我认为必须有一些更简单的方法。

不要太害怕：twitter-bootstrap源是可以理解的。看看the appropriate lines in scaffolding.less，看起来像这样：

// Links      

a { 
  color: @link-color; 
  text-decoration: none; 

  &:hover, 
  &:focus { 
    color: @link-hover-color; 
    text-decoration: underline; 
  } 

  &:focus { 
    .tab-focus(); 
  } 
}

事实上，Bootstrap源令我感到惊讶：正如你所提到的，至少还有:visited，但Bootstrap忽略了这一点。答案就在this SO question：

中找到

由于Bootstrap是为应用程序构建的，因此它不支持[:visited]

有道理。无论如何，我想我们只需要覆盖Bootstrap集的样式，添加其他伪选择器。但是，正如你在对另一个答案的评论中所说：

作为开发人员，我怎么知道我必须“unstyle”？

事实上，您需要覆盖的事项列表很短，MDN summarizes in the :hover article：

为了设置适当的链接样式，您需要将：hover规则放在：link和：visited规则之后但在：active之前，由LVHA订单定义:: link - ：visited - ：hover - ：活性

这就是你的问题的答案：你从MDN知道（或者如果你必须：从W3规范，这当然是'更具权威'） - 或者你知道从你创建的这个Stack Overflow线程： - 。）

如果您愿意，您仍然可以为您的网站设置:active。这让我想到......

我的解决方案

这实际上是您在问题中提到的解决方案：使用特定的类来设置正确的伪类的样式。

Sass版本：

$unstyledAColor: #333;
$unstyledAColorHover: #000;
$unstyledAColorInverse: #969696;
$unstyledAColorInverseHover: #FFF;

.a-unstyled {
    color: $unstyledAColor;
    &:link { color: $unstyledAColor; }
    &:visited { color: $unstyledAColor; }
    &:hover { color: $unstyledAColorHover; }
    &:active { color: $unstyledAColor; }
}

.navbar-inverse .a-unstyled {
    color: $unstyledAColorInverse;

    &:link { color: $unstyledAColorInverse; }
    &:visited { color: $unstyledAColorInverse; }
    &:hover { color: $unstyledAColorInverseHover; }
    &:active { color: $unstyledAColorInverse; }
}

CSS版本：

.a-unstyled { color: #333; }
.a-unstyled:link { color: #333; }
.a-unstyled:visited { color: #333; }
.a-unstyled:hover { color: #000; }
.a-unstyled:active { color: #333; }

.navbar-inverse .a-unstyled { color: #969696; }
.navbar-inverse .a-unstyled:link { color: #969696; }
.navbar-inverse .a-unstyled:visited { color: #969696; }
.navbar-inverse .a-unstyled:hover { color: #FFF; }
.navbar-inverse .a-unstyled:active { color: #969696; }

Answer 5

Reset color .text-reset和Text Decoration .text-decoration-none是实现这一目标的Bootstrap 4选项。

Answer 6

我找到了Bootstrap 3的一个版本，只是删除了访问的属性：Bootstrap "link-unstyled" Helper Class

.a-unstyled {
    &,
    &:link,
    &:visited,
    &:hover,
    &:active,
    &:active:hover {
      color: inherit;
      text-decoration: none;
    /*font-style: inherit;
      background-color: transparent;
      font-size: inherit;
      font-variant: inherit;
      font-weight: inherit;
      line-height: inherit;
      font-family: inherit;
      border-radius: inherit;
      border: inherit;
      outline: inherit;
      box-shadow: inherit;
      padding: inherit;
      vertical-align: inherit;*/
    }
}

这包括@Ohad Schneider的评论的继承建议。

如何在使用bootstrap时取消锚定

6 个答案:

一些一般要点

我的解决方案