Question

我有这个标记：

<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插件自动生成的，所以我无法修改它。

Answer 1

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

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

Answer 2

是的，这是可能的

对于第一个外部分区

#slider1 .ui-slider

对于第二个外部分区

#slider2 .ui-slider

Answer 3

你可以写

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

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

通过写！重要它将覆盖自动生成的样式..

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

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

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

相同类名但不同ID的不同样式

6 个答案: