如何更改css属性

我正在尝试使用html创建12列。我有一个叫做.columnContent的css类，其中一些属性是background-color :(设置为红色）如何更改css属性

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

我试过<div style="color"但只改变了文本颜色而不是列的背景颜色。

.columnWapprer { 
 
    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="columnWapprer"> 
 
    <div sclass="columnContent"> 
 
    </div> 
 
    <div class="columnContent"> 
 
     test 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-06-19 Luke

指定正确的类。类应该描述内容，例如“人口”或“分数”。然后很容易为每个分配不同的样式。另一方面，如果您只想交替与内容无关的颜色，则可以使用[：nth-of-type]（https://developer.mozilla.org/en/docs/Web/CSS/:nth-of-类型）或：第n个孩子。另外，请记住，您可以将多个类分配给单个元素。 – spectras

小心第一个div class“collumnContent”的小错字：class而不是sclass – Aigloun

@andreas：请不要为了填充而添加标签。 – BoltClock

可以使用: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>

来源

2017-06-19 09:05:17 andreas

当然！不客气，很高兴我能帮上忙！ – andreas

是的，它没有工作谢谢你的帮助:) – Luke

不错！别客气。 – andreas

您可以使用第n个孩子这样触发特定列：

.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>

来源

2017-06-19 09:09:39

这个答案与我的不同吗？ – andreas

-1

您可以使用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>

然后你用CSS样式不同的他们。

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

来源

2017-06-19 09:15:17

如何更改css属性

回答

相关问题