Bootstrap为锚点添加了非常好的默认样式,但是它使得标记不适用于蓝色文本以外的其他内容.说,我希望文本是黑色的.一种方法是添加class="my_class"到锚标记,然后放置a.my_class{color:black}规则.
但是我很快就会意识到bootstrap还增加了样式:hover.所以,我也必须改变它.此外,它改变了风格outline,text-decoration,:focus,等.
当然,我可以阅读未经编辑的bootstrap.css版本,并尝试了解我必须覆盖的所有情况,以确保它保持黑色.但我认为必须有一些更简单的方法 - 我期待添加class="link-unstyled"或其他东西？
即使是晚会,但对于普通文本链接(内部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;
}
这是一个实例: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;
}
Link
Link with a different style
遇到这个问题虽然Jeroen的答案非常全面,但也很长.
如果我希望这个标签具有正常的标签文本颜色,我只需要两个新的CSS规则.
a.unlink {
color: inherit;
}
a.unlink:hover {
color: inherit;
}
如果你看一下我的代码片段,就能看出差异.
a.unlink {
color: inherit;
}
a.unlink:hover {
color: inherit;
}
Good looking tag <-- This looks good
Bad looking tag <-- This looks bad
京公网安备 11010802040832号 | 京ICP备19059560号-6 