CSS 类已禁用？答案

【问题标题】：CSS class Disabled?CSS 类已禁用？
【发布时间】：2011-07-11 22:04:21
【问题描述】：

对于我的 vBulletin 论坛，头像图片是这样提取的：

<img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" class="forumavatar1" />

注意 class="forumavatar1"

这个类的css如下：

.forumavatar1 {
padding: 2px;
border: 1px solid black;
background: white;
}

但由于某种原因，黑色边框没有显示。在 Google Chrome 和 Firebug 上，这个边框：元素被划掉了？？

示例页面，看某人头像：http://forums.animefushigi.com/showthread.php?31-So-about-that-dark-theme

【问题讨论】：

开发者工具告诉你它被什么覆盖了？

标签： css class html firebug border

【解决方案1】：

尝试在CSS Specificity 上阅读这篇文章 - 简而言之，您的单类选择器正在被多类选择器覆盖。要解决此问题（尽管我不建议将此作为永久修复），您可以将上面的样式更改为：

.forumavatar1 {
    padding: 2px;
    border: 1px solid black !important;
    background: white;
}

我建议您查看并修改覆盖它的样式，即：

.postbitlegacy .userinfo .postuseravatar img, .eventbit .userinfo .eventuseravatar img {
    border: 0 solid #F2F6F8;
    max-width: 180px;
    outline: 0 dotted #DADADA;
}

【讨论】：

谢谢，我现在会坚持使用 !important
好的。就像我说的，这不是一个非常有用的修复，只是因为它打断了 CSS 是 Cascading 样式表的想法，但除非你打算对那个特定的样式目标进行更多的编辑，否则它会正常工作.

【解决方案2】：

发生这种情况是因为 .postbitlegacy .userinfo .postuseravatar img, .eventbit .userinfo .eventuseravatar img 有 border: 0 solid #F2F6F8; 并且这会覆盖选择器 .forumavatar1。您可以将 selector's specificity 从 .forumavatar1 更改为 .userinfo .postuseravatar img.forumavatar1 这将使其变为黑色。

具体的补充文章：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

即使它是非常有用的方法，也要明智地使用它。

作为最后的避难所，我建议!important

【讨论】：

【解决方案3】：

如果它被划掉，那么其他具有更高优先级的东西就会覆盖它。尝试添加一个 !important 以查看是否可以使其正常工作。

border: 1px solid black !important;

如果是这样，您可以保留 !important 或找出覆盖它的内容。

【讨论】：