您如何分别设置两个都需要jquery-ui.css的jQuery小部件的样式？

Question

I have a page that I've designed which uses two commercial widgets both of which require the jquery-ui.css. When both widgets are on the page, one shows the .ui-slider .ui-slider-range correctly while the other one is absent. One widget uses the jquery-ui without modification while the other widget makes specific changes to the styling of .ui-slider .ui-slider-range. I assume I need to make one a separate class/id/element. How do I do that when it is based on a specific library/template? I tried using !important but that just created other issues.

Answer 1

You are on the right track, you can use the console to try your styles.

What im guessing is that you made changes in a class used by other widgets like .ui-widget, try to not mess with classes like .left, .container, or anything that looks like a generic name.

What you can do to specify the element you want to change is add a container with a different class, and then use it to access the widget classes:

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

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

Styles:

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

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