我迟到了,但仍然想提供一个替代答案来直接解决问题中的一些问题,并提供我自己的解决方案 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; }