Question

我想设置以下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动态创建所以我想为这个类添加样式。

如果您共享用于克隆结构的优化代码，那也会很棒不同的身份。

如果您仍有疑问，请告诉我。

谢谢

Answer 1

您可以使用属性选择器。

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

Answer 2

我认为@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 five将为蓝色...因此您可以覆盖要测试并使用它的类。

您也可以使用

之类的选择器

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

，最后一个跨度为红色。我希望这有帮助。

我的两分钱......

如何使用通用选择器设置.class-0，.class-1，.class-2的样式？

2 个答案: