其他CSS库覆盖EXT JS选项卡；“看”；

-查看实时版本

如何确保ExtJS中的CSS在我的选项卡中使用，而不会被其他库过度使用？在包含其他CSS库的文件中，我的EXT JS选项卡的“外观”与我的文件未引用其他库时的外观不同。我可以在Firebug中看到正在发生的事情，但我不知道如何修复它

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

如果没有其他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">
<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 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">

另一件我不明白的事情是，当我点击

---

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

在ExtJs中，选项卡上的背景图像在以下选择器之一中定义，它们都以

另一个选项是再次覆盖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);
}

当浏览器试图确定要使用哪些样式时，它会考虑一种称为。在继续阅读之前，请检查该链接。因此，这里发生的事情是，那些包含ID的额外样式比extjscss文件中定义的样式具有更高的特异性（如果选择器是ChrisR在回答中提到的）。您可以通过两种方式解决此问题：

将ExtJS选择器更改为
比您的
其他样式文件。你可以这样做
为它们添加一个ID（希望是这样）
是可能的）
另一个选项是创建样式
在其他样式文件中，不太具体。
这意味着你可能不得不
把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" />



以防万一你会遇到一些相同的特殊性级别问题。
我今天发布了一个实时版本。指向它的链接位于原始帖子的顶部。在style.css的第410行，是您的
#中心a、#宽a、#超宽a
样式覆盖了您的ExtJS样式。我用一些建议更新了我的答案，这也证实了我的发现。我想我真正的问题是“我怎样才能改变我的Ext JS代码？我不能改变style.css中的内容。我浏览了Ext JS API，看到了在某些情况下应用css的参考，但我无法解释应该如何做。你应该应用更具体的css规则，检查我的答案，我已经再次更新了它。