2

次の CSS クラスのスタイルを設定したい。これのための短いスタイリングテクニックはありますか?

.test-0 { }
.test-2 { }
.test-3 { }
/* etc. */

私は次のようなものを探しています:

.test-%d% { }

test-*異なる番号と共通のスタイルを持つ多くのクラスを動的に作成したいと考えています。

アップデート

これが私の実際の状況です

<input type="button" value="click" class="button_class" />
<h1 class="ui-widget-header">Question -  1  </h1>
<div class="ui-widget-content">

 <div id="form_container-0">
        <div class="placeholder">Add your form fields here</div>
        <div style="clear: both;"></div>            
  </div>
  </div>

ユーザーが上のボタンをクリックすると、同じ構造が複製され、フォームの最後に追加されます

したがって、フォームは次のようになります

  <h1 class="ui-widget-header">Question -  1  </h1>
  <div class="ui-widget-content">

  <div id="form_container-0">
   <div class="placeholder">Add your form fields here</div>   
  </div>
  <div id="form_container-1">
    <div class="placeholder">Add your form fields here</div>          
  </div>

  </div>

css クラス form_container-[%d] は jquery によって動的に作成されます。
だから私はこのクラスにスタイルを追加したい.

また、異なる ID で構造を複製するための最適化されたコードを共有していただければ幸いです。

それでも疑問がある場合はお知らせください。

ありがとう

4

2 に答える 2

3

属性セレクターを使用できます。

div[class*='test-'] {...}

于 2013-08-13T05:00:38.837 に答える
1

@Ed Wには正しい解決策があると思いますが、私には余分なアイデアがありますが、単純ではありませんが、あなたが持っているものよりも短くなっています。そして、あなたが望むと思うさまざまなテストを行うのに役立ちます... fiddel http://jsfiddle.net/ncubica/2sj9W/

CSS

.test-1, 
.test-2,
.test-3,
.test-4,
.test-5{
    color:#F60;
    display:block;
}

.test-5{
    color:blue
}

html

<span class="test-1">One</span>
<span class="test-2">Two</span>
<span class="test-3">Three</span>
<span class="test-4">Four</span>
<span class="test-5">Five</span>

スパン5は青色になります...そのため、テストしたいクラスをオーバーライドして、それで遊ぶことができます.

また、次のようなセレクターを使用できます

HTML

<div>
    <span>I'm pink</span>    
    <span>I'm pink</span>    
    <span>I'm pink</span>    
    <span>I'm pink</span>    
    <span class="test-1">I'm red</span>
</div>

CSS

div > span{
    color:pink;
    display:block;
}

div > span.test-1{
    color:red;
}

最後のスパンは赤になります。これが助けになることを願っています。

私の2セント...

于 2013-08-13T05:31:40.280 に答える