我正在制作电子邮件简报。它包含30列，所有列都具有以下类：
.content-text {
padding: 10px 10px 10px 10px !important;
font-size: 16px;
line-height: 1.3;
}
每列需要具有上述类，但每列需要具有不同的背景颜色。例如：
.column--left__content {
background-color: #bebab1;
}
因此，可以说列 - left__content应该继承内容文本中的所有内容。我怎么能以最好的方式做到这一点？
HTML
<table class="row">
<tbody>
<tr>
<th class="small-12 large-1 columns first first--column__color " style="width:1%;">
<table>
<tr>
<th>
<p></p>
</th>
</tr>
</table>
</th>
<!-- Here is how I solved this until now -->
<th class="small-12 large-5 columns first content-text column--left__content">
<table >
<tr>
<th>
<h5><strong>This is headline 1</strong></h5>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
目前我正在调用山猫content-text中的column--left__content和<th>，这看起来并不那么好。
这样做的最佳做法是什么？我在想fx column--left__content必须继承.content-text，但也有单独的样式吗？
修改
答案 0 :(得分：1)
一种可能的方法是在CSS中使用nth-child选择器。
.wrapper {
color:#fff;
background-color:none;
width:50%;
height:3rem;
line-height:3rem;
font-size:1.5rem;
}
.wrapper p {
padding:0 0 0 1rem;
}
.wrapper p:nth-child(1) {
background: red;
}
.wrapper p:nth-child(2) {
background: green;
}
.wrapper p:nth-child(3) {
background: brown;
}<div class="wrapper">
<p> col 1</p>
<p> col 2</p>
<p> col 3</p>
</div>
另一种可能的方法是创建自己的background-color帮助程序类，以便在需要时使用，而不仅仅是在这种情况下使用。
.wrapper {
color:#fff;
background-color:none;
width:50%;
height:3rem;
line-height:3rem;
font-size:1.5rem;
}
.wrapper p {
padding:0 0 0 1rem;
}
.bg_red {
background: red;
}
.bg_green {
background: green;
}
.bg_brown {
background: brown;
}<div class="wrapper">
<p class="bg_red"> col 1</p>
<p class="bg_green"> col 2</p>
<p class="bg_brown"> col 3</p>
</div>
有一种第三种方法与我曾经做过的小jQuery插件有关（我没有更新它:)但因为没有真正的用法）。但是这个概念是在语法中使用简单的辅助类来实现文本颜色和背景颜色。其余的由插件完成。必须在HTML中添加的类（不需要CSS中的任何内容）具有前缀（bgDarken-，bgLighten-，txtDarken-，txtLighten-），后跟1到256之间的数字。检查结果片段。
您可以找到它here，有两个使用Bootstrap的示例（并在此处发布在代码段中），另一个使用Materialize框架。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jLightenDarken Demo with Bootstrap Framework integration.</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
body {
color:#fff;
background-color:#ffffff;
}
div.alert, div.panel {
background-color:#2196f3;
color:#ffffff;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8 col-xs-offset-2 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
<div class="panel panel-default bgDarken-4">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-4 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-8">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-8 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-16">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-16 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-24">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-16 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-40">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-48">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-64">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-80">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-16 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-96">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-124">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-140">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-148">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-156">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-164">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-192">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-224">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-16 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-255">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-16 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-8 col-xs-offset-2 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
<div class="alert alert-info bgLighten-16"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-24"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-40"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-48"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-56"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-64"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-80"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-96"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-124 txtDarken-124"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-156 txtDarken-156"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-164 txtDarken-164"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-180 txtDarken-180"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-192 txtDarken-196"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-216 txtDarken-224"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-232 txtDarken-248"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-256 txtDarken-256"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">!function(n){function t(n){return null==n||""==n||"rgba(0, 0, 0, 0)"===n||"transparent"===n}function o(n){var i=n.parent(),r=n.css("background-color");return t(r)&&(r=i&&null!=i?o(i):""),r}function r(n){var i=n.parent(),o=n.css("color");return t(o)&&(o=i&&null!=i?r(i):""),o}function s(n){var t=n.split("-"),i=[];return 2==t.length?(i.functionality=t[0],i.amount=parseInt(t[1]),i):void 0}function l(t){var o,l,a,e,h=[],c=[],u=[];for(e=0,j=0;j<t.length;j++){"txtLighten"==t&&(e=1),"txtDarken"==t&&(e=-1),o=n('div[class*="'+t+'"]');var g,f=0,p=[];for(n.each(o,function(){for($klassKolor=r(n(this)),p.push($klassKolor.match(/\d+/g)),h.push($klassKolor),l=n(this).prop("class").split(" "),k=0;k<l.length;k++)-1!=l[k].search(t)&&(a=s(l[k]),c.push(a.amount))}),f=0;f<p.length;f++){for(g=p[f],i=0;i<g.length;i++)g[i]=parseInt(g[i])+c[f]*e,g[i]>=255&&(g[i]=255),g[i]<=0&&(g[i]=0),g[i]=g[i].toString(16),g[i].length<2&&(g[i]="0"+g[i]);u.push("#"+g.join(""))}}n.each(o,function(t){n(this).css("color",u[t])})}function a(t){var r,l,a,e,h=[],c=[],u=[];for(e=0,j=0;j<t.length;j++){"bgLighten"==t&&(e=1),"bgDarken"==t&&(e=-1),r=n('div[class*="'+t+'"]');var g,f=0,p=[];for(n.each(r,function(){for($klassKolor=o(n(this)),p.push($klassKolor.match(/\d+/g)),h.push($klassKolor),l=n(this).prop("class").split(" "),k=0;k<l.length;k++)-1!=l[k].search(t)&&(a=s(l[k]),c.push(a.amount))}),f=0;f<p.length;f++){for(g=p[f],i=0;i<g.length;i++)g[i]=parseInt(g[i])+c[f]*e,g[i]>=255&&(g[i]=255),g[i]<=0&&(g[i]=0),g[i]=g[i].toString(16),g[i].length<2&&(g[i]="0"+g[i]);u.push("#"+g.join(""))}}n.each(r,function(t){n(this).css("background-color",u[t])})}n.fn.jLightenDarken=function(){l("txtLighten"),l("txtDarken"),a("bgLighten"),a("bgDarken")}}(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function() {
$('body').jLightenDarken();
});
</script>
</body>
</html>
总结一下，根据您的真实需要，其他SO用户提供的这些或任何其他答案可能是您的最佳（或不是）解决方案。
答案 1 :(得分：0)
假设您的HTML如下：
<section class="wrapper">
<div class="col1"> col 1</div>
<div class="col2"> col 2</div>
<div class="col3"> col 3</div>
</section>
你的CSS可能是这样的：
.wrapper > div {
padding: 10px 10px 10px 10px !important;
font-size: 16px;
line-height: 1.3;
}
并为每个班级添加颜色：
.col1 {
background-color: red;
}
.col2 {
background-color: green;
}
我希望它有所帮助
答案 2 :(得分：0)
一个好的选择也是使用CSS Less。您可以使用CSS Less的@extend概念。
.contest-test {
.context-text(); /* Copies everything from .context-text down here */
border: 1px solid red;
}
在此处Link
答案 3 :(得分：0)
首先：如果元素的每一次迭代都有相同的类，那么你做错了。
第二：您可以通过不分配类，但将基本CSS提供给元素本身来轻松解决您的问题。
例如：
th {
padding: 10px 10px 10px 10px !important;
font-size: 16px;
line-height: 1.3;
}
然后您只需根据需要添加背景颜色类。