qbo*_*lec 16 css twitter-bootstrap
Bootstrap为锚点添加了非常好的默认样式,但是它使得<a>标记不适用于蓝色文本以外的其他内容.说,我希望文本是黑色的.一种方法是添加class="my_class"到锚标记,然后放置a.my_class{color:black}规则.
但是我很快就会意识到bootstrap还增加了样式:hover.所以,我也必须改变它.此外,它改变了风格outline,text-decoration,:focus,等.
当然,我可以阅读未经编辑的bootstrap.css版本,并尝试了解我必须覆盖的所有情况,以确保它保持黑色.但我认为必须有一些更简单的方法 - 我期待添加class="link-unstyled"或其他东西？
Mar*_*kus 29
即使是晚会,但对于普通文本链接(内部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>dsg*_*ghi 14
重置颜色 .text-reset和文本装饰 .text-decoration-none是用于实现此目的的Bootstrap 4选项。
这是一个实例: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>
我迟到了，但仍然想提供一个替代答案来直接解决问题中的一些问题，并提供我自己的解决方案 FWIW。
\n\n\n\n\n我期待添加
\nclass="link-unstyled"之类的东西？
我也是。显然它不在那里。
\n\n\n\n\n当然，我可以阅读 bootstrap.css 的未缩小版本 [...] 但我认为必须有一些更简单的方法。
\n
不要太害怕：twitter-bootstrap 源代码是相当容易理解的。查看scaffolding.less 中的相应行，如下所示：
\n\n// Links \n\na { \n color: @link-color; \n text-decoration: none; \n\n &:hover, \n &:focus { \n color: @link-hover-color; \n text-decoration: underline; \n } \n\n &:focus { \n .tab-focus(); \n } \n} \n所以事实上，Bootstrap 源让我感到惊讶：正如你提到的，至少还有 is :visited，但 Bootstrap 忽略了这一点。答案可以在这个问题中找到：
\n\n\n由于 Bootstrap 是为应用程序构建的，因此它不支持 [
\n:visited]
说得通。无论如何，我想我们只需要覆盖 Bootstrap 的样式集，根据需要添加其他伪选择器。但是，正如您在对另一个答案的评论中所说：
\n\n\n\n\n作为一名开发人员，我怎么知道我必须“取消样式”？
\n
事实上，有一个简短的列表，列出了您必须覆盖的内容，MDN 在 :hover 文章中对此进行了总结：
\n\n\n\n\n为了正确设置链接样式，您需要将 :hover 规则放在 :link 和 :visited 规则之后，但在 :active 规则之前，如 LVHA 顺序所定义： :link \xe2\x80\x94 :visited \xe2 \x80\x94 ：悬停 \xe2\x80\x94 ：活动。
\n
这就是你的问题的答案：你从 MDN 知道（或者如果你必须：从 W3 规范，这当然是“更权威”） - 或者你通过查看这个 Stack Overflow 线程知道你已经创建了:-)。
\n\n如果您愿意，您仍然可以:active为您的网站进行设置。这让我想到...
这实际上是您在问题中提到的解决方案：使用特定的类来设置正确的伪类的样式。
\n\n萨斯版本：
\n\n$unstyledAColor: #333;\n$unstyledAColorHover: #000;\n$unstyledAColorInverse: #969696;\n$unstyledAColorInverseHover: #FFF;\n\n.a-unstyled {\n color: $unstyledAColor;\n &:link { color: $unstyledAColor; }\n &:visited { color: $unstyledAColor; }\n &:hover { color: $unstyledAColorHover; }\n &:active { color: $unstyledAColor; }\n}\n\n.navbar-inverse .a-unstyled {\n color: $unstyledAColorInverse;\n\n &:link { color: $unstyledAColorInverse; }\n &:visited { color: $unstyledAColorInverse; }\n &:hover { color: $unstyledAColorInverseHover; }\n &:active { color: $unstyledAColorInverse; }\n}\nCSS 版本：
\n\n.a-unstyled { color: #333; }\n.a-unstyled:link { color: #333; }\n.a-unstyled:visited { color: #333; }\n.a-unstyled:hover { color: #000; }\n.a-unstyled:active { color: #333; }\n\n.navbar-inverse .a-unstyled { color: #969696; }\n.navbar-inverse .a-unstyled:link { color: #969696; }\n.navbar-inverse .a-unstyled:visited { color: #969696; }\n.navbar-inverse .a-unstyled:hover { color: #FFF; }\n.navbar-inverse .a-unstyled:active { color: #969696; }\n遇到这个问题虽然Jeroen的答案非常全面,但也很长.
如果我希望这个标签具有正常的标签文本颜色,我只需要两个新的CSS规则.
a.unlink {
color: inherit;
}
a.unlink:hover {
color: inherit;
}
如果你看一下我的代码片段,就能看出差异.
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