【问题标题】:How to unstyle anchor when using bootstrap使用引导程序时如何取消锚定样式
【发布时间】:2021-02-15 23:05:03
【问题描述】:

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

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

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

【问题讨论】:

标签: css twitter-bootstrap


【解决方案1】:

晚会,但对于普通文本链接(在p 等内部)有一个更短的解决方案:

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

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

Edit 22.11.2015:某些用例仍需要:hover,例如在以下 sn-p 中。更新了上面的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>

【讨论】:

  • 在我看来,这是迄今为止最好的回应,它就像一个魅力:) 感谢分享知识!
  • 我用上面的但是发现添加 cursor:pointer;悬停样式提供了一个视觉线索,它实际上是一个链接。
  • @marcp 是的,这取决于unstyle 对你意味着什么:-)
  • cursor: default; 呢?
【解决方案2】:

Reset color .text-resetText Decoration .text-decoration-none 是实现此目标的 Bootstrap 4 选项。

【讨论】:

  • 这应该是正确答案,只需添加2个bootstrap内置类即可解决问题!
【解决方案3】:

这是一个活生生的例子: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>

【讨论】:

  • 你的答案是正确的。不过,我的问题更为普遍:作为开发人员,我如何知道我必须“取消样式”。例如,你怎么知道你必须覆盖 ":focus" 而不是 ":visited"?我知道答案是“你可以在 unminified bootstrap.css 上使用 grep”,但我希望某处有一些文档,或者一些简单的技巧,比如添加“link-unstyled”类(类似于 list-unstyled)。
【解决方案4】:

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

如果我想让这个标签有正常的标签文本颜色,我只需要两个新的 CSS 规则。

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

如果你看看我的sn-p,你就能看出区别。

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

【讨论】:

    【解决方案5】:

    我迟到了,但仍然想提供一个替代答案来直接解决问题中的一些问题,并提供我自己的解决方案 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 设置的样式,根据需要添加其他伪选择器。但是,正如您在对另一个答案的评论中所说:

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

    实际上有一个简短的列表,您必须覆盖,MDN summarizes in the :hover article

    为了给链接设置适当的样式,您需要将 :hover 规则放在 :link 和 :visited 规则之后,但在 :active 之前,如 LVHA-order 所定义的那样: :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; }
    

    【讨论】:

    • +1 但是颜色应该被继承(例如color: inherit),你也应该添加text-decoration: none
    【解决方案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评论的继承建议。

    【讨论】:

      猜你喜欢
      • 2017-07-09
      • 2016-07-20
      • 1970-01-01
      • 2020-01-13
      • 2021-10-09
      • 1970-01-01
      • 2020-09-15
      • 2018-05-03
      • 1970-01-01
      相关资源
      最近更新 更多