verschiedene Hintergrundfarben in div Tags

Question

Ich frage mich, ob es eine schönere Möglichkeit gibt, 4 verschiedene Hintergrundfarben in CSS zu setzen. Ich muss die folgende Einstellung vornehmen:

Gibt es eine saubere und schöne Code, den ich neben dieser machen kann ich gemacht, oder ist dies der einzige Weg, es zu tun? Der Code sieht nach meiner Meinung nur sehr hässlich aus.

<div class="bg1"></div> 
<div class="bg2"></div> 
<div class="bg3"></div> 
<div class="bg4"></div> 



.bg1 { 
    background-color: blue; 
} 
.bg2 { 
    background-color: red; 
} 
.bg3 { 
    background-color: green; 
} 
bg4 { 
    background-color: purple; 
} 

Answer 1

personnaly hilft, würde ich das tun:

<div class="square square-blue"></div> 
<div class="square square-red"></div> 
<div class="square square-green"></div> 
<div class="square square-purple"></div> 

und in CSS:

.square{ 
    border: 1px solid black; // and all params 
} 
.square-blue { 
    background-color: blue; 
} 
.square-green { 
    background-color: green; 
} 
.square-purple { 
    background-color: purple; 
} 
.square-red { 
    background-color: red; 
} 

für mehr Lesbarkeit (eine kleine Verwendung von BEM - http://getbem.com/introduction/).

Answer 2

Sie style = ‚background-color: # 123456‘ hinzufügen könnte zu jedem div, wenn Sie wirklich hatte wegen einer Einschränkung eines Template-Engine (Ich kann nicht einen solchen Umstand vorstellen), aber was du hast es gut im Kontext.

EDIT: Was ich damit meine ist, wenn Sie wollten, sagen Sie einen Regenbogen-Effekt. In Perl/TemplateToolkit konnte ich etwas wie sehen:

So ähnlich. Völlig ungeprüft, aber ich bin mir sicher, dass Sie den Drift bekommen.

Answer 3

können Sie die Verwendung von n-Kind/n-of-Typ hier

Überprüfen Sie den folgenden Code-Schnipsel machen.

.container div:nth-child(1) { 
 
    background: blue; 
 
} 
 
div:nth-of-type(2) { 
 
    background: red; 
 
} 
 
div:nth-of-type(3) { 
 
    background: green; 
 
} 
 
div:nth-of-type(4) { 
 
    background: purple; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.container div { 
 
    width: 100vw; 
 
    height: 50px; 
 
}

<div class="container"> 
 
    <div class="bg1"></div> 
 
    <div class="bg2"></div> 
 
    <div class="bg3"></div> 
 
    <div class="bg4"></div> 
 
</div>

Hoffe, dass es