不同的样式用于相同的类名称，但ID不同 [英] Different Styles for same class name but different id

问题描述

我有这个标记：

 < div id =slider1> 
< div class =ui-slider ui-slider-horizo​​ntal ui-widget ui-widget-content ui-corner-all> 
< a style =left：0％; class =ui-slider-handle ui-state-default ui-corner-allhref =＃>< / a> 
< / div> 
< / div> 
< div id =slider2> 
< div class =ui-slider ui-slider-horizo​​ntal ui-widget ui-widget-content ui-corner-all> 
< a style =left：0％; class =ui-slider-handle ui-state-default ui-corner-allhref =＃>< / a> 
< / div> 
< / div> 
  

我想要的是两个元素的不同样式元素。它们被包含在具有不同ID的外部div中。这可能吗？而且这个标记是由jqueryui插件自动生成的，所以我不能修改它。

解决方案

你可以写

 ＃slider1 .ui-slider {
 // styles; 
！重要; 
} 
 
＃slider2 .ui-slider {
 // styles; 
！重要; 
 
 
 
 
 
 $ b 
通过写！重要它会覆盖自动生成的样式。
 
I have this markup:
<div id="slider1">
    <div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
        <a style="left: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a>
    </div>
</div>
<div id="slider2">
    <div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
        <a style="left: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a>
    </div>
</div>
What i want is different style elements for the two  elements. They are contained in outer div with different id's. Is this possible? And also this markup is auto generated by the jqueryui plugin so i can't modify it.
解决方案
you can write 
#slider1 .ui-slider{
    //styles;
    !important;
}

#slider2 .ui-slider{
    //styles;
    !important;
}
By writing !important it'll override auto generated styles..

                        
这篇关于不同的样式用于相同的类名称，但ID不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！