你如何分别设计两个需要jquery-ui.css的jQuery小部件？

Question

我有一个我设计的页面，它使用两个商业小部件，这两个小部件都需要jquery-ui.css。当两个小部件都在页面上时，一个正确显示.ui-slider .ui-slider-range而另一个不存在。一个小部件使用jquery-ui而不进行修改，而另一个小部件对.ui-slider .ui-slider-range的样式进行特定更改。我假设我需要创建一个单独的类/ id /元素。当它基于特定的库/模板时，我该怎么做？我尝试使用！important但这只是创造了其他问题。

Answer 1

你走在正确的轨道上，你可以使用控制台来尝试你的风格。

我猜测你在其他小部件（例如.ui-widget）使用的类中进行了更改，试着不要像.left，.container或看起来像通用名称的类那样混乱。

如何指定要更改的元素是添加具有不同类的容器，然后使用它来访问窗口小部件类：

<div class="myFirstContainer">
    // Here comes widget 1
</div>

<div class="mySecondContainer">
    // Here comes widget 2
</div>

样式：

.myFirstContainer .ui-slider{
    background: red !important;
}

.mySecondContainer .ui-slider{
    background: blue !important;
}