Question

这很难解释，但我正在尝试最小化CSS编码量来创建相同的输出。

在示例中，我有3个div，除了颜色外，所有都是相同的。如何使第3部分使用与其他部分相同的css规则但具有红色背景？我知道如何使用文本（例如p class = rule1或p class = rule 2）而不是div。

我希望我已经清楚地解释了这个问题。谢谢。

＆＃13;

.central-section{
	background:#9C3;
	width:960px;
	height:auto;
	margin:0 auto;
	margin: 10px 0 10px 0;
}
.central-section-2{
	background:#ff0;
	width:960px;
	height:auto;
	margin:0 auto;
	margin: 10px 0 10px 0;
}

＆＃13;

<div class="central-section">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Exact same section but green background</p>
</div>

<div class="central-section-2">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Exact same section but yellow background</p>
</div>

<div class="central-section">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Exact same section but I want a red background without having to create another huge css section</p>
</div>

＆＃13;

Answer 1

如果我清楚地理解你的要求，我就会这样做。 divs结构的一个类（因为它由所有中心部分共享）和几个用于背景颜色。

.central-section {
  width: 960px;
  height: auto;
  margin: 0 auto;
  margin: 10px 0 10px 0;
}

.green-background {
  background: #9C3;
}

.yellow-background {
  background: #ff0;
}

.red-background {
  background: #f00;
}

<div class="central-section green-background">
  <h1>Header 1</h1>
  <h2>Header 2</h2>
  <p>Exact same section but green background</p>
</div>

<div class="central-section yellow-background">
  <h1>Header 1</h1>
  <h2>Header 2</h2>
  <p>Exact same section but yellow background</p>
</div>

<div class="central-section red-background">
  <h1>Header 1</h1>
  <h2>Header 2</h2>
  <p>Exact same section but I want a red background without having to create another huge css section</p>
</div>

Answer 2

我只想为你想要使用的每种颜色创建一个类。

.central-section{
	background:#9C3;
	width:960px;
	height:auto;
	margin:0 auto;
	margin: 10px 0 10px 0;
}

.yellow-bg{background:#ff0;}
.red-bg{background:#f00;}

<div class="central-section">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Exact same section but green background</p>
</div>

<div class="central-section yellow-bg">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Exact same section but yellow background</p>
</div>

<div class="central-section red-bg">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Exact same section but I want a red background without having to create another huge css section</p>
</div>

Answer 3

我建议创建一个名为＆＃34; central-section＆＃34;使用所有基本规则，并为不同的背景颜色创建单独的类。然后在您的代码中，您可以添加您的基础＆＃34; central-section＆＃34;每个div的类需要使用您想要的样式进行格式化，然后添加额外的类来添加颜色。例如，如果您的颜色表示严重程度级别，则它们的名称如下所示：

.central-section{
    width: 960px;
    height: auto;
    margin: 0 auto;
    margin: 10px 0 10px 0;
}

.success{
    background: green;
}

.warning{
    background: yellow;
}

.error{
    background: red;
}

你的HTML看起来像这样：

<div class="central-section success">
    <h1>Header 1</h1>
    <h2>Header 2</h2>
    <p>Exact same section but green background</p>
</div>

<div class="central-section warning">
    <h1>Header 1</h1>
    <h2>Header 2</h2>
    <p>Exact same section but yellow background</p>
</div>

<div class="central-section error">
    <h1>Header 1</h1>
    <h2>Header 2</h2>
    <p>Exact same section but I want a red background without having to create another huge css section</p>
</div>

Answer 4

如上所述，您有一组具有相同属性的元素（family）。但是，其中一个需要不同的属性。

最好的方法是给family一个共同的class，然后覆盖成员，它需要特殊属性通过级联：

.central-section {
  background: #9C3;
  width: 960px;
  height: auto;
  margin: 0 auto;
  margin: 10px 0 10px 0;
}
.central-section-2 {
  background: #ffff00;
}
.central-section-3 {
  background: red;
}

<div class="central-section central-section-1">
  <h1>Header 1</h1>
  <h2>Header 2</h2>
  <p>Exact same section but green background</p>
</div>

<div class="central-section central-section-2">
  <h1>Header 1</h1>
  <h2>Header 2</h2>
  <p>Exact same section but yellow background</p>
</div>

<div class="central-section central-section-3">
  <h1>Header 1</h1>
  <h2>Header 2</h2>
  <p>Exact same section but I want a red background without having to create another huge css section</p>
</div>

Answer 5

您可以使用括号[ ]：

[class^="central-section"] {
    background:#9C3;
    width:960px;
    height:auto;
    margin:0 auto;
    margin: 10px 0 10px 0;
}
.central-section-2{
    background:#ff0;
}

语句[class^="central-section"]涵盖了以central-section开头的所有类名称的元素。因此，对于第3部分，您只能定义不同的属性：

.central-section-3{
    background:#f0f;
}

Answer 6

你可以添加另一个类。

如下所示

＆＃13;

.central-section{
	background:#9C3;
	width:960px;
	height:auto;
	margin:0 auto;
	margin: 10px 0 10px 0;
}
.central-section-2{
	background:#ff0;
	width:960px;
	height:auto;
	margin:0 auto;
	margin: 10px 0 10px 0;
}
.central-section.red p{
  background:red;
  }

＆＃13;

<div class="central-section">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Exact same section but green background</p>
</div>

<div class="central-section-2">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Exact same section but yellow background</p>
</div>

<div class="central-section red">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Exact same section but I want a red background without having to create another huge css section</p>
</div>

＆＃13;

具有相似属性但差异较小的div类

6 个答案: