如何更改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屬性

回答

相關問題