html - 如何防止我的 CSS 与 Facebook 的 CSS 冲突？

Question

我的页面上有以下 HTML:

<div id="mypanel">
   <span>SomeText</span>
   <span>SomeText2</span>
   <span>SomeText3</span>
   <span>SomeText4</span>
   <fb:login-button ..snip.. />
</div>

你可以看到我有一些用于登录按钮的 Facebook 标记语言 (FBML)。

哪个 get 呈现为:

<span id="RES_ID_fb_login_text" class="FBConnectButton_Text">Login with Facebook</span>

现在，Facebook 在他们的 CSS 中有以下 CSS 选择器:“.FBConnectButton_Text”来设置 FB 连接按钮的样式。很好。

但是，我的问题是，我试图围绕它设置其他元素(我的元素)的样式，这导致 Facebook 控件的样式设置不正确。

在上面的示例中(当然已经大大简化了)，我想为所有 <span> 设置样式<div> 中的元素称为“mypanel”，所以我编写了以下 CSS:

#mypanel span
{
    font-weight: bold;
    font-size: 14px;
}

然后会发生什么？好吧，Facebook Connect 按钮也应用了这些样式(不好)。

我会认为他们会有一个“重置”样式的 CSS 表，专门根据他们的需要设置这些字体(就像我们在我们的网站上所做的那样)。

所以我最终不得不将类应用于我的所有跨度，以避免 Facebook 控件变得困惑。考虑到我的网站上到处都是这些 FB 控件，“绕过”Facebook 是一件很痛苦的事情。

你们能想出更好的方法来处理这个问题吗？

Answer 1

尝试使用更具体的或 !important 语句覆盖原始样式:

#mypanel span{
    font-weight: bold;
    font-size: 14px;
}

#mypanel span.facebook { /* Not sure what classes the FB button uses */
    font-size: 12px;
    font-weight: normal;
}

.facebook {
    font-size: 12px !important;
    font-weight: normal !important;
}

或者，如果您可以忍受缺少浏览支持，请使用 :not 伪选择器。

#mypanel span:not(.facebook) {
    font-weight: bold;
    font-size: 14px;
}

这将简单地为您提供所有非 Facebook span。如果你可以使用 Javascript，像 IE9.js 这样的脚本还将为您提供 :not 对 IE 6+ 的支持。