CSS 使用引导程序时如何取消锚点样式

Question

提问by qbolec

Bootstrap adds very nice default styles for anchors, but it makes it difficult to use <a>tag for something other than blue text. Say, I want the text to be black. One way to do that would be to add class="my_class"to the anchor tag, and then put a.my_class{color:black}rule.

Bootstrap 为锚点添加了非常好的默认样式，但它使得很难为<a>蓝色文本以外的其他内容使用标签。说，我希望文本是黑色的。一种方法是添加class="my_class"到锚标记，然后放置a.my_class{color:black}规则。

But as I will soon realize bootstrap adds also style for :hover. So, I have to change that too. Also it changes styles for outline, text-decoration, :focus, etc.

但是我很快就会意识到 bootstrap 也为:hover. 所以，我也必须改变它。此外，它改变了风格outline，text-decoration，:focus，等。

Of course I could just read unminified version of bootstrap.css and try to understand what are all the cases I have to cover, to make sure it stays black. But I perceive that there must be some easier way - I was expecting something like adding class="link-unstyled"or something?

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

Answer 1

采纳答案by JohanVdR

Here is a live example: http://jsfiddle.net/S9JXC/12/You can style an individual element or a group of elements. In this case they override the styles defined by bootstrap.css which is loaded before these styles and take precedence.

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

Styles defined by bootstrap.css

bootstrap.css 定义的样式

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

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

Custom styles

自定义样式

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

回答by Markus

Even later to the party but with a shorter solution for for normal text links (inside petc.):

甚至晚到聚会，但对于普通文本链接（内部p等）有更短的解决方案：

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

~~My tests show that with :linkall special styles on hover or after clicking it are removed.~~

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

Edit 22.11.2015: :hoveris still needed for some use cases, for example in the following snippet. Updated the css above.

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

Answer 3

回答by Chris Anderson-MSFT

Came across this and while Jeroen's answer is pretty comprehensive, it's also quite long.

遇到了这个，虽然 Jeroen 的回答非常全面，但也很长。

If I want this label to have the normal label text color, I just need two new CSS rules.

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

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

If you look at my snippet, you can see the difference.

如果你看看我的片段，你会看到不同之处。

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

<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

Answer 4

回答by Jeroen

I'm late to the party, but would still like to offer an alternative answer to address some issues from the question directly, and offer my own solution FWIW.

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

Some general points

一些一般点

I was expecting something like adding class="link-unstyled"or something?

我期待添加什么之类的class="link-unstyled"东西？

Me too. Apparently it isn't there.

我也是。显然它不在那里。

Of course I could just read unminified version of bootstrap.css [...] But I perceive that there must be some easier way.

当然，我可以只阅读 bootstrap.css 的未缩小版本 [...] 但我认为必须有一些更简单的方法。

Don't be too afraid: the twitter-bootstrap source is fairly understandable. Have a look at the appropriate lines in scaffolding.less, which look like this:

不要太害怕：twitter-bootstrap 源是相当容易理解的。查看scaffolding.less中的相应行，如下所示：

// Links      

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

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

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

So in fact, the Bootstrap source surprised me: as you mention there is at least also :visited, but Bootstrap ignores that. The answer to that is found in this SO question:

所以实际上，Bootstrap 源代码让我感到惊讶：正如你提到的，至少还有:visited，但 Bootstrap 忽略了这一点。在这个 SO question中可以找到答案：

as Bootstrap was built for applications, it doesn't support [:visited]

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

Makes sense. Anyways, I guess we only have to override the styles Bootstrap sets, adding other pseudo selectors as we desire. But, as you say in your comment on the other answer:

说得通。无论如何，我想我们只需要覆盖 Bootstrap 设置的样式，根据需要添加其他伪选择器。但是，正如您在对另一个答案的评论中所说：

how do I know as a developer what I have to "unstyle"?

作为开发人员，我如何知道我必须“取消样式”？

There is in fact a short list of things you have to override, which MDN summarizes in the :hover article:

实际上有一个简短的列表你必须重写，MDN 在 :hover 文章中总结了这些：

In order to style appropriately links, you need to put the :hover rule after the :link and :visited rules but before the :active one, as defined by the LVHA-order: :link — :visited — :hover — :active.

为了适当地设置链接样式，您需要将 :hover 规则放在 :link 和 :visited 规则之后但在 :active 之前，如 LVHA 顺序所定义的： :link — :visited — :hover — :active。

That's the answer to your question: you know from MDN (or if you must: from the W3 spec, which is of course 'more authorative') - or you know from looking at this Stack Overflow thread you've created :-).

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

If you wish, you can still set :activefor your website though. Which brings me to...

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

My solution

我的解决方案

This is in fact the solution you allude to in your question: use a specific class to style the correct pseudo-classes.

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

Sass version:

萨斯版本：

$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 version:

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

回答by lsblsb

I found a version for Bootstrap 3, just removed the visited property: Bootstrap "link-unstyled" Helper Class

我找到了 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;*/
    }
}

This includes the inheritance suggestion of @Ohad Schneider's comment.

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

CSS 使用引导程序时如何取消锚点样式

提问by qbolec

采纳答案by JohanVdR

回答by Markus

回答by Chris Anderson-MSFT

回答by Jeroen

Some general points

一些一般点

My solution

我的解决方案

回答by lsblsb

相关推荐

最近更新

标签

CSS 使用引导程序时如何取消锚点样式

提问by qbolec

采纳答案by JohanVdR

回答by Markus

回答by Chris Anderson-MSFT

回答by Jeroen

Some general points

一些一般点

My solution

我的解决方案

回答by lsblsb

相关推荐

CSS box-shadow 在同一个 div 上的插入和外部

CSS 悬停在 div 上，但如果悬停在他的孩子身上则不会

CSS 如何使 ASP CheckBoxList 标签与复选框保持在同一行

CSS 如何使 Bootstrap '列表组' 响应

相关推荐

最近更新

标签