jQuery组件覆盖了我的CSS样式

Question

我正在使用jQuery选项卡和其他一些jQuery小部件。

现在，选项卡内的所有内容都按照jQuery CSS进行样式设置。因此，最简单的方法就是注释或更改一些jQuery CSS定义。但显然，所有其他小部件（如自动完成）也不再起作用。

其他人是如何解决这个问题的？我首选的解决方案是保留jQuery CSS不变，并在选项卡内使用自己的默认CSS。

例如：

.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; } 

这会覆盖我的标签中的文本颜色。对于其他小部件来说没问题，但在选项卡内看起来很糟糕。

- Remy

Answer 1

我建议您为元素使用不同的CSS类（或者在元素上开始使用类，或者如果您尚未这样做，则使用包含元素），以此避免与jQuery样式冲突。

- GregL

---

没错。问题是我有一些全局定义，比如字体、颜色等等。我不想再为每个元素重新定义一遍。 - Remy

作为一个想法，尝试将所有内容都包装在一个具有特定类的 div 中，然后定义所有样式仅适用于该包含 div 内。例如 div.my_class span { ... }。然后只需在选项卡内使用相同的容器。这样行得通吗？ - GregL

Answer 2

我认为解决方案是使用jQuery删除CSS类文件，就像在底部选项卡的示例中一样：

<script>
    $(function() {
        $( "#tabs" ).tabs();
        $( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" )
            .removeClass( "ui-corner-all ui-corner-top" )
            .addClass( "ui-corner-bottom" );
    });
</script>

- Remy