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>

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

最后一个跨度将是红色的。我希望这会有所帮助。

我的两分钱...

于 2013-08-13T05:31:40.280 回答