Question

我有一个页面有几个使用相同css类的元素。我希望每个元素都有不同的背景颜色，而不会让我的css文件变大。有没有办法在我的html中做一些事情，比如class =＆＃34; xyz（something）＆＃34;并在css文件中有background-color :(某事）;？

任何想法都将不胜感激。

Answer 1

您不必复制所有类的所有属性

.classnameforall{
    /*your css goes here. does not matter if it has background-color, it will be the default one if you do not use other classes*/
}
.redbg{background-color:red;}
.greenbg{background-color:green;}
.some-otherbg{background-color:#df4533;}

并像你问的那样使用它

class="classnameforall redbg"

或

class="classnameforall greenbg"

Answer 2

您可以做的是不要在css文件中指定background-color。但是对于每个元素，使用内联样式，只有属性为background-color，并指定具有所有其他样式属性的必需类。

因此，所有元素都将具有不同的背景颜色，但其他样式将保持不变。

.classname{
  all other styles except background-color;


}

<element class="classname" style="background-color:red" >

JS FIDDLE DEMO： http://jsfiddle.net/sXF5T/

Answer 3

尝试使用伪选择器nth-child（an + b）

p:nth-child(2n + 1) {
  background: red;
}
p:nth-child(2n + 2) {
  background: blue;
}

示例：http://jsfiddle.net/gomflo/gtpsX/

将不同的颜色变量传递给同一个类

3 个答案: