Question

对于我的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上，这个border：元素正在划掉？

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

Answer 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;
}

Answer 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

Answer 3

如果它被划掉，那么具有更高优先级的其他东西就会覆盖它。尝试添加一个！important来判断它是否有效。

border: 1px solid black !important;

如果确实如此，您可以保留！important或找出覆盖它的内容。

CSS类已禁用？

3 个答案: