Anwenden von CSS-Klassen auf vom Plugin generierte Elemente desselben Tags?

Question

Grundsätzlich habe ich ein Plugin, das ein HTML-Menü aus einem <ul> Tag und mehreren <li> Tags generiert. Ich möchte jedem Menüelement unterschiedliche Hintergrundfarben zuweisen, aber ich kann diese CSS-Klassen nicht zu jedem Listenelement hinzufügen, da sie programmgesteuert generiert werden und daher nicht direkt zugänglich sind. Gibt es eine Möglichkeit, verschiedene Klassen auf mehrere untergeordnete Elemente desselben Tags anzuwenden? Ohne Zugriff auf die Plugin-Dateien, in meinem Fall.

Answer 1

Ja, es ist möglich.

Sie können den nth-of-type(n) Selektor verwenden, um verschiedene <li> Elemente zu zielen, ohne dem generierten Code Klassen hinzuzufügen.

body {font-size: 22px} 
 

 
ul li:nth-of-type(1){background:red} 
 
ul li:nth-of-type(2){background:blue} 
 
ul li:nth-of-type(3){background:green} 
 
ul li:nth-of-type(4){background:yellow} 
 
ul li:nth-of-type(5){background:orange} 
 
ul li:nth-of-type(6){background:purple} 
 
ul li:nth-of-type(7){background:cyan} 
 
ul li:nth-of-type(8){background:brown} 
 
ul li:nth-of-type(9){background:pink}

<ul> 
 
    <li>Apple</li> 
 
    <li>Orange</li> 
 
    <li>Watermelon</li> 
 
    <li>Pear</li> 
 
    <li>Milk</li> 
 
    <li>Cheese</li> 
 
    <li>Bread</li> 
 
    <li>Jam</li> 
 
    <li>Sugar</li> 
 
</ul>

Sie auch andere Elemente auf der Seite verwenden, können die Änderungen, um sicherzustellen, nur auf das Element angewendet werden Sie beeinflussen möchten.

Beispiel:

body { 
 
    font-size: 22px 
 
} 
 

 
.foo ul li:nth-of-type(1) { 
 
    background: red 
 
} 
 

 
.foo ul li:nth-of-type(2) { 
 
    background: blue 
 
} 
 

 
.foo ul li:nth-of-type(3) { 
 
    background: green 
 
} 
 

 
.foo ul li:nth-of-type(4) { 
 
    background: yellow 
 
}

<div class="bar"> 
 

 
    <h1> First List (not modified)</h1> 
 
    <ul> 
 
    <li>Apple</li> 
 
    <li>Orange</li> 
 
    <li>Watermelon</li> 
 
    <li>Pear</li> 
 
    </ul> 
 

 
</div> 
 

 
<div class="foo"> 
 

 
    <h1> Second List (modified)</h1> 
 
    <ul> 
 
    <li>Apple</li> 
 
    <li>Orange</li> 
 
    <li>Watermelon</li> 
 
    <li>Pear</li> 
 
    </ul> 
 

 
</div> 
 

 
<div class="bar"> 
 

 
    <h1> Third List (not modified)</h1> 
 
    <ul> 
 
    <li>Apple</li> 
 
    <li>Orange</li> 
 
    <li>Watermelon</li> 
 
    <li>Pear</li> 
 
    </ul> 
 

 
</div>