0

我有这个标记：

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

4

6 回答 6

1

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

#slider1 .ui-slider {
    //style 1
}
#slider2 .ui-slider {
    //style 2
}
于 2012-06-22T04:39:49.353 回答
1

是的，有可能

对于第一个外部 div

#slider1 .ui-slider

对于第二个外部 div

#slider2 .ui-slider
于 2012-06-22T04:39:53.643 回答
1

你可以写

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

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

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

于 2012-06-22T04:40:39.500 回答
0

是的，现在您可以像这样定义相同的 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 
}
于 2012-06-22T04:39:41.240 回答
0

风格与父子关系喜欢

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}
于 2012-06-22T04:40:42.987 回答
0

使用您的 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>
于 2012-06-22T04:46:17.983 回答