相同类名但不同id的不同样式答案

【问题标题】：Different Styles for same class name but different id相同类名但不同id的不同样式
【发布时间】：2012-06-24 09:37:32
【问题描述】：

我有这个标记：

<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>

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

【问题讨论】：

标签： javascript html css jquery-ui

【解决方案1】：

你可以写

#slider1 .ui-slider{
    //styles;
    !important;
}

#slider2 .ui-slider{
    //styles;
    !important;
}

通过编写 !important 它将覆盖自动生成的样式..

【讨论】：

【解决方案2】：

要将 css 应用于这两个元素，只需使用这样的规则

#slider1 .ui-slider {
    //style 1
}
#slider2 .ui-slider {
    //style 2
}

【讨论】：

我很肯定这行得通。您是指示例样式还是什么？

【解决方案3】：

是的，有可能

对于第一个外部 div

#slider1 .ui-slider

对于第二个外部 div

#slider2 .ui-slider

【讨论】：

【解决方案4】：

是的，现在您可以像这样定义相同的 css 属性

     #slider1  .ui-slider{
    xxxx:xxxx; // css properties 
    }

 #slider2  .ui-slider{
xxxx:xxxx; // css properties 
}

现在第二个选项是

     #slider1 > .ui-slider{
    xxxx:xxxx; // css properties 
    }

 #slider2 > .ui-slider{
xxxx:xxxx; // css properties 
}

【讨论】：

【解决方案5】：

与父子关系类似的样式

parent_id/class child_id/class
{//do stuff here
}

这里喜欢

#slider1 div{
style for 1st one div}
#slider2 div{
style for 2nd one div}
#slider1 a{
style for 1st one a}
#slider2 a{
style for 2nd one a}

【讨论】：

【解决方案6】：

使用您的 css 文件或代码块并尝试将标记中的 style="" 最小化。请遵循以下具体指南：

通过计算 css 的各种组件并以 (a,b,c,d) 的形式表达它们来计算特异性。举个例子会更清楚，但首先是组件。

元素，伪元素：d = 1 – (0,0,0,1) 类，伪类，属性：c = 1 – (0,0,1,0) ID：b = 1 – (0,1,0,0) 内联样式：a = 1 – (1,0,0,0) id 比类更具体，比元素更具体。

来自：http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

 <style>
    .class1 {}
    .class2 {}
    #id1 {}
    #id2 {}
 </style>

【讨论】：