避免把属性'width'分成几块

Avoid the property 'width' into several blocks

我有 4 种不同的颜色:

我的问题是,我经常使用属性 width: 25% 分成几个块。可以避免重复吗?

HTML

<div class="color">
  <div class="red"></div>
  <div class="aqua"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

CSS

.color{
  width: 90%;
  background-color: black;
  margin: 0 auto;
  height: 10%;
  display: flex;
}


.red {
  width: 25%;
  background-color: red;
}

.aqua {
  width: 25%;
  background-color: aqua;
}

.green {
  width: 25%;
  background-color: green;
}

.blue {
  width: 25%;
  background-color: blue;
}

是的,您可以在颜色 div 上使用网格,例如:

.color {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

使用一个额外的class并给所有部分:

.color{
  width: 90%;
  background-color: black;
  margin: 0 auto;
  height: 10%;
  display: flex;
}

.part {
  width: 25%;
  height: 100px;
}
.red {
  background-color: red;
}

.aqua {
  background-color: aqua;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}
<div class="color">
  <div class="part red"></div>
  <div class="part aqua"></div>
  <div class="part green"></div>
  <div class="part blue"></div>
</div>

是的,只需向您想要影响的每个元素添加第二个 class。

<div class="color">
  <div class="red block"></div>
  <div class="aqua block"></div>
  <div class="green block"></div>
  <div class="blue block"></div>
</div>
.block {
  width: 25%;
}

您可以使用此代码:

.color > * { width: 25%; }

它将 25% 的宽度分配给 .color

的所有 direct 子元素

这样就不需要向 HTML 代码添加任何内容,也不需要额外的 类。

.color{
  width: 90%;
  background-color: black;
  margin: 0 auto;
  height: 10%;
  display: flex;
}

.color > * {
  width: 25%;
}
.red {
  background-color: red;
}

.aqua {
  background-color: aqua;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}
<div class="color">
  <div class="red">a</div>
  <div class="aqua">b</div>
  <div class="green">c</div>
  <div class="blue">d</div>
</div>

因为你使用的是 flexbox 那么你可以在所有 flexbox 项目中添加一个公共 class 并添加 flex: 1;

.color {
  width: 90%;
  background-color: black;
  margin: 0 auto;
  height: 10%;
  display: flex;
}

.box {
  flex: 1;
}

.red {
  background-color: red;
}

.aqua {
  background-color: aqua;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}
<div class="color">
  <div class="box red">red</div>
  <div class="box aqua">aqua</div>
  <div class="box green">green</div>
  <div class="box blue">blue</div>
</div>

使用.color div。这将选择 class 名称颜色下的所有 div。阅读 CSS selectors 了解更多信息。

.color div {
  width: 25%;
}

.color {
  width: 90%;
  background-color: black;
  margin: 0 auto;
  height: 10%;
  display: flex;
}

.red {
  background-color: red;
}

.aqua {
  background-color: aqua;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.color div {
  width: 25%;
}
<div class="color">
  <div class="red"></div>
  <div class="aqua"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>