Question

我尝试使用html创建12列。我有一个名为.columnContent的css类，其中包含一些属性，其中一个属性为background-color :(设置为红色）

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

我尝试了<div style="color"，但只更改了文字颜色而不是列的背景颜色。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Answer 2

您可以像这样使用nth-child来触发特定列：

.collumnWapprer{
    display: flex;
    flex-direction: row;
}
.collumnContent{
 position: relative;
 width: 200px;
 height: 1000px;
 text-align: left;
 margin: 3px;
 **background-color: red;**
}

.collumnContent:nth-child(1){
  background-color: rgba(0, 0, 0, 1);
}

.collumnContent:nth-child(2){
  background-color: rgba(0, 0, 0, 0.95);
}

.collumnContent:nth-child(3){
  background-color: rgba(0, 0, 0, 0.90);
}

.collumnContent:nth-child(4){
  background-color: rgba(0, 0, 0, 0.85);
}

.collumnContent:nth-child(5){
  background-color: rgba(0, 0, 0, 0.80);
}

.collumnContent:nth-child(6){
  background-color: rgba(0, 0, 0, 0.75);
}

.collumnContent:nth-child(7){
  background-color: rgba(0, 0, 0, 0.70);
}

.collumnContent:nth-child(8){
  background-color: rgba(0, 0, 0, 0.65);
}

.collumnContent:nth-child(9){
  background-color: rgba(0, 0, 0, 0.60);
}

.collumnContent:nth-child(10){
  background-color: rgba(0, 0, 0, 0.55);
}

.collumnContent:nth-child(11){
  background-color: rgba(0, 0, 0, 0.50);
}

.collumnContent:nth-child(12){
  background-color: rgba(0, 0, 0, 0.45);
}

<div class="collumnWapprer">
  <div class="collumnContent"></div>
  <div class="collumnContent"></div>
  <div class="collumnContent"></div>
  <div class="collumnContent"></div>
  <div class="collumnContent"></div>
  <div class="collumnContent"></div>
  <div class="collumnContent"></div>
  <div class="collumnContent"></div>
  <div class="collumnContent"></div>
  <div class="collumnContent"></div>
  <div class="collumnContent"></div>
  <div class="collumnContent"></div>
</div>

或者您可以使用这样的第一个孩子和最后一个孩子触发第一列或最后一列：

.collumnWapprer{
    display: flex;
    flex-direction: row;
}
.collumnContent{
 position: relative;
 width: 200px;
 height: 1000px;
 text-align: left;
 margin: 3px;
 background-color: red;
}

.collumnContent:first-child{
  background-color: blue;
}

.collumnContent:last-child{
  background-color: green;
}

<div class="collumnWapprer">
  <div class="collumnContent"></div>
  <div class="collumnContent"></div>
  <div class="collumnContent"></div>
  <div class="collumnContent"></div>
  <div class="collumnContent"></div>
  <div class="collumnContent"></div>
  <div class="collumnContent"></div>
  <div class="collumnContent"></div>
  <div class="collumnContent"></div>
  <div class="collumnContent"></div>
  <div class="collumnContent"></div>
  <div class="collumnContent"></div>
</div>

Answer 3

您可以使用以下JavaScript循环：

<div id="centerContainer">
<div class="collumnWapprer">
<script>
for (i=1; i<5; i++){
document.getElementById('collumnWrapper').innerHTML='<div class="collumnContent' + i + ' "> test </div>';
}
</script>

</div>
</div>

然后用不同的方式为它们设置样式。

PS：这不是动态网页的最佳方法。如果您使用的是PHP等服务器端脚本语言，则可以在显示结果之前将结果循环到DIV。

如何更改css属性

3 个答案: