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>

私が欲しいのは、2 つの要素の異なるスタイル要素です。それらは、異なる ID を持つ外部 div に含まれています。これは可能ですか？また、このマークアップは jqueryui プラグインによって自動生成されるため、変更できません。

4

6 に答える 6

1

CSS を 2 つの要素に適用するには、次のようなルールを使用するだけです

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

はい、可能です

最初の外側の div の場合

#slider1 .ui-slider

2 番目の外側の 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 
}

そして今、この2番目のオプションは

     #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 に答える