css - 其他 CSS 库覆盖 EXT JS 选项卡 "look"

Question

http://www.habitat.noaa.gov/protection/efh/newInv/index.html - 查看实时版本

我如何确保来自 EXT JS 的 CSS 在我的选项卡中使用而不被另一个库覆盖？我的 EXT JS 选项卡的“外观”在还包含其他 CSS 库的文件中与我的文件不引用其他库时是不同的。我可以在 Firebug 中看到发生了什么，但我不知道如何修复它。

(因为我是新手，所以我还不能插入图片。我提供了链接)

没有其他 CSS 库，我的标签看起来像这样:

http://i1107.photobucket.com/albums/h395/mapguymike/tabs2.jpg

当我添加其他库时:

删除了链接，因为我现在有一个显示相同信息的实时版本。

<link rel="stylesheet" type="text/css" href="../EXT_JS/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../EXT_JS/examples/simple-widgets/qtips.css" />
<link href="../../../css/style.css" rel="stylesheet" type="text/css" media="screen">
<link href="../../../css/contentarea.css" rel="stylesheet" type="text/css" media="screen">

我丢失了每个选项卡的左侧。我使用 Firebug 将其追踪到 style.css 文件中的背景元素，该元素打开的图像基本上挡住了左侧。如果我在 FB 中将其关闭，它会变回白色，然后我必须关闭背景位置才能关闭白色。即便如此，它仍然不一样，但很接近。

#center a, #wide a, #ultrawide a {
...
background-image: url("/images_template/link.gif");
background-position: 0 0;
...
}

我不明白的另一件事是，当我单击 <a> 时，选项卡的左侧会受到影响。在 Firebug 中(下一行)它是 ext-tab-right 而不是 ext-tab-left 在页面上突出显示。 <a onclick=”return false;” href=”#”><em><span><span>New England</span></span></em></a>

如何阻止其他库覆盖我的选项卡的“外观”？

Answer 1

在 ExtJs 中，选项卡上的背景图像在以下选择器之一中定义，它们都以 <a> 为目标-元素。

• .x-tab-strip-top .x-tab-right
• .x-tab-strip-top .x-tab-left
• .x-tab-strip-top .x-tab-strip-inner

您是否有机会在任何这些选择器或 <a> 上应用任何背景样式？ -你自己的元素？

如果不实际查看代码，就很难找到冲突的 css 样式。您是否有机会发布包含在 ext-all.css 旁边的 css 文件？

---

编辑:style.css 中的第 410 行导致了问题。 #center a, #wide a, #ultrawide a作为Ext定义的背景样式具有更高的特异性

您可以通过使用类而不是 id 来设置所有 <a> 的样式来解决它-标签:

• 替换id="center"通过 class="center"
• 替换 css 选择器 #center a, #wide a, #ultrawide a与 .center a, .wide a, .ultrawide a

如果您想知道如何以及为什么阅读 CSS 特异性:http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

---

另一个选项是再次覆盖 style.css 中的样式。只需将以下规则添加到您可以编辑的 css 文件中。它非常冗长，但应该可以工作。

#center a.x-tab-strip-top .x-tab-right, #wide a.x-tab-strip-top .x-tab-right, #ultrawide a.x-tab-strip-top .x-tab-right, 
#center a.x-tab-strip-top .x-tab-left, #wide a.x-tab-strip-top .x-tab-left, #ultrawide a.x-tab-strip-top .x-tab-left, 
#center a.x-tab-strip-top .x-tab-strip-inner, #wide a.x-tab-strip-top .x-tab-strip-inner, #ultrawide a.x-tab-strip-top .x-tab-strip-inner {
    background-image: url(../images/default/tabs/tabs-sprite.gif);
}