Question

我的页面上有以下HTML：

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

你可以看到我在登录按钮上有一些Facebook标记语言（FBML）。

将其呈现为：

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

现在，Facebook在他们的CSS中有以下CSS Selector：“.FBConnectButton_Text”来设置FB Connect按钮的样式。细

但是，我的问题是，我试图围绕它设置其他项目（我的元素），这导致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等脚本也会为您提供{6}的:not支持。

Answer 2

不要标记标签本身，应用于标签的样式类（跨度等）

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

然后你的css将成为：

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

你不必创建单独的类，只需要将你的类与facebook分开。例如，您可以添加一个三个字母的标识符（您公司的首字母或您自己的首字母），并使用它们设置每个标记的样式。

如果您添加规则以排除/包含任何内容，那么您依赖于Facebook不对其样式或标记进行任何更改。一旦他们添加新的课程/样式表，您将不得不重新访问您的课程。

最后一种选择是在内容周围添加一个辅助div，它会排除FBML，然后设置其中的所有项目的样式。

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

然后你的css将成为：

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

Answer 3

为body标记或您有权访问的任何顶级父标记添加唯一的命名空间。例如

<body id="__someAppname">

或

<div id="__someAppname">

在您的所有CSS中附加此id，例如__someAppname

#__someAppname {
 /* reset all your default css */ 
 padding:0;
 margin:0;
}

从.product{}到#__someAppename .product{}

Answer 4

有一种简单但不优雅的方式。

1）将FB中的css保存在本地文件中，加载样式表，并在最后一个时加载你保存的fb css。

或

2）此外，您可以使用jquery移动要应用的重置元素，并使用选择器避开FB元素：not

<script language="javascript"> $("span:not([class^=FB])").css('background-color','#F00'); </script>

我不是说你应该展示它，但它可能会起作用。

如何防止我的CSS与Facebook的CSS发生冲突？

4 个答案:

或