html - 如何更改CSS属性

Question

我正在尝试使用 html 创建 12 列。我有一个名为 .columnContent 的 css 类有几个属性，其中之一是背景颜色:(设置为红色)

我需要更改背景颜色，因为我希望每一列都具有不同的颜色。在 html 中声明时如何更改列类的属性？或者我可以使用 div 吗？否则我将不得不创建 12 个 css 类，一定有更好的方法。

我试过了 <div style="color"但这只会更改文本颜色，不会更改列的背景颜色。

.columnWrapper {
  display: flex;
  flex-direction: row;
}

.columnContent {
  position: relative;
  width: 200px;
  height: 1000px;
  text-align: left;
  margin: 3px;
  background-color: red; /* <- */
}

<div id="centerContainer">
  <div class="columnWrapper">
    <div sclass="columnContent">
    </div>
    <div class="columnContent">
      test
    </div>
  </div>
</div>

Answer 1

您可以使用 :nth-child()伪类将不同的颜色应用于您的 .columnContent 元素，即:

.columnContent:nth-child(1) { background-color: green; }
.columnContent:nth-child(2) { background-color: red; }
.columnContent:nth-child(3) { background-color: blue; }
/* and so on */

这是一个工作示例:

.columnWrapper {
  display: flex;
  flex-direction: row;
}

.columnContent {
  position: relative;
  width: 200px;
  height: 1000px;
  text-align: left;
  margin: 3px;
}

.columnContent:nth-child(1) {
  background-color: green;
}

.columnContent:nth-child(2) {
  background-color: red;
}

.columnContent:nth-child(3) {
  background-color: blue;
}

.columnContent:nth-child(4) {
  background-color: orange;
}

<div id="centerContainer">
  <div class="columnWrapper">
    <div class="columnContent"></div>
    <div class="columnContent"></div>
    <div class="columnContent"></div>
    <div class="columnContent"></div>
  </div>
</div>