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

我不明白的另一件事是，当我点击Firebug中的<a>（在下面的行中）时，标签的左侧受到影响，它是ext-tab-right而不是ext -tab-left突出显示在页面上。 <a onclick=”return false;” href=”#”>New England</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"
用#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);
}

Answer 2

当浏览器尝试确定要使用的样式时，它会考虑名为specificity的内容。请在阅读之前检查该链接。所以这里发生的是那些包含ID的额外样式比extjs CSS文件中定义的样式具有更高的特异性（如果选择器在他的答案中作为ChrisR提及）。您可以通过两种方式解决此问题：

将ExtJS选择器更改为比你的更具体其他样式文件。你可以这样做为他们添加一个ID（希望这个是可能的。）
另一种选择是制作样式在您的其他样式文件LESS特定。这意味着你可能不得不采取出了ID引用。

如果两个样式具有相同的特异性，则最后定义的样式优先（假设没有用户或用户代理样式表，我认为这不是这种情况）。因此，您可能希望将加载样式的顺序切换为：

<link href="../../../css/style.css" rel="stylesheet" type="text/css" media="screen">
<link href="../../../css/contentarea.css" rel="stylesheet" type="text/css" media="screen">
<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" />

以防万一你遇到同样的特异性问题。

其他CSS库重写EXT JS选项卡“看”

2 个答案: