Question

我有一些div类只改变它们之间的一个属性（background属性）。我想知道我是否可以预先定义一个标准类，然后只更改了这一个属性来定义所有其他属性，以节省数百行代码。

以下是我目前所写的内容：

.flex-info-green {
  color: white;
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  background: #79B0B4;
  box-shadow: 0px 2px 1px rgba(0,0,0,0.2);
  padding: 10px;
  border-radius: 2px;
  width: 20%;
  height: 100px;
  text-align: center;
}

.flex-info-blue {
  color: white;
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  background: #7993B4;
  box-shadow: 0px 2px 1px rgba(0,0,0,0.2);
  padding: 10px;
  border-radius: 2px;
  width: 20%;
  height: 100px;
  text-align: center;
}

.flex-info-foam {
  color: white;
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  background: #79B47D;
  box-shadow: 0px 2px 1px rgba(0,0,0,0.2);
  padding: 10px;
  border-radius: 2px;
  width: 20%;
  height: 100px;
  text-align: center;   
}

.flex-info-pink {
  color: white;
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  background: #9B79B4;
  box-shadow: 0px 2px 1px rgba(0,0,0,0.2);
  padding: 10px;
  border-radius: 2px;
  width: 20%;
  height: 100px;
  text-align: center;   
}

.flex-info-red {
  color: white;
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  background: #B4797F;
  box-shadow: 0px 2px 1px rgba(0,0,0,0.2);
  padding: 10px;
  border-radius: 2px;
  width: 20%;
  height: 100px;
  text-align: center;   
}

正如您在所有这些div类中看到的那样，所有这些div类之间唯一变化的数据是背景变量。是否可以定义JUST flex-info，然后可能有绿色，蓝色，泡沫等单独的变量？

我试过这样做：

.flex-info {
  color: white;
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  box-shadow: 0px 2px 1px rgba(0,0,0,0.2);
  padding: 10px;
  border-radius: 2px;
  width: 20%;
  height: 100px;
  text-align: center;
}

.flex-info.green {
  background: #79B0B4;
}

然后在HTML中将其写为：

<div class="flex-info green">hi</div>

但是当我把它们放在一起时，颜色只会采用绿色而不是其他颜色。真是令人沮丧！我希望你能提供一些支持。

Answer 1

您有完全正确的想法，只需创建其他选择器（例如.flex-info.blue和.flex-info.foam），然后更新<div>元素以反映新类（例如<div class="flex-info blue">hi</div> blue和<div class="flex-info foam">hi</div> foam}：

＆＃13;

.flex-info {
  color: white;
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  box-shadow: 0px 2px 1px rgba(0,0,0,0.2);
  padding: 10px;
  border-radius: 2px;
  width: 20%;
  height: 100px;
  text-align: center;
}

.flex-info.green {
  background: #79B0B4;
}

.flex-info.blue {
  background: #7993B4;
}

.flex-info-foam {
  background: #79B47D;
}

.flex-info.pink {
  background: #9B79B4;
}

.flex-info.red {
  background: #B4797F;
}

＆＃13;

<div class="flex-info green">hi</div>
<div class="flex-info blue">hi</div>
<div class="flex-info foam">hi</div>
<div class="flex-info pink">hi</div>
<div class="flex-info red">hi</div>

＆＃13;

希望这有帮助！：）

Answer 2

你要做的是创建两个类。一个对于所有div元素都足够通用，然后针对每个特定div更具体。然后，您将为每个div应用两个类，通用的一个，然后是特定div的特定唯一类。

.allDiv {
  color: white;
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  box-shadow: 0px 2px 1px rgba(0,0,0,0.2);
  padding: 10px;
  border-radius: 2px;
  width: 20%;
  height: 100px;
  text-align: center;
}

.flex-info-green {
  background: #79B0B4;
}

.flex-info-blue {
  background: #7993B4;
}

.flex-info-foam {
  background: #79B47D;

}

.flex-info-pink {
  background: #9B79B4;
}

.flex-info-red {
  background: #B4797F;
}

<div class="allDiv flex-info-green">Content</div>
<div class="allDiv flex-info-blue">Content</div>
<div class="allDiv flex-info-foam">Content</div>
<div class="allDiv flex-info-pink">Content</div>
<div class="allDiv flex-info-red">Content</div>

Answer 3

这是你想要完成的吗？

<div class="flex-info green">hi</div>
<div class="flex-info blue">hi</div>
<div class="flex-info foam">hi</div>
<div class="flex-info pink">hi</div>
<div class="flex-info red">hi</div>

-- question
 - answer

如何将CSS属性从一个div复制到另一个div？

3 个答案: