ich jede Kugel in einer UL zu machen versuchen, eine andere Farbe hat wie in diesem Bild http://imgur.com/XCHxKFcUnterschiedliche Farbe für jeden Aufzählungspunkt
Ich dachte, vielleicht n-ter Kind für jedes Element, aber ich anwenden, die Kugel mit der vor dem Pseudoelement. Aus meiner Sicht kann man Pseudoelemente nicht stapeln. Irgendwelche Ideen?
Sie meinen Code hier sehen können: http://sacredheart.silverfishdevelopment.com
Je nachdem, wie viele Aufzählungszeichen Sie haben Sie mehr n-te-Kind-Tags mit Ihren Farben hinzufügen. Für dieses Beispiel habe ich nur RGB verwendet.
HTML
<ul>
<li><span>first</span></li>
<li><span>second</span></li>
<li><span>third</span></li>
</ul>
CSS
li {
float: left;
margin: 25px;
}
li:nth-child(1) {
color: red;
}
li:nth-child(2) {
color: blue;
}
li:nth-child(3) {
color: green;
}
li span {
color: black;
}
Sie müssten :: vor hier hinzufügen, sonst wird die Textfarbe ändern. 'li: nth-child (n) :: before' ist perfekt gültiges Markup. – allnodcoms
Ich wollte nur sagen, wenn er sich nicht damit beschäftigen wollte, die Aufzählungspunkte mit :: vorher hinzuzufügen, kann er mein Beispiel verwenden. – oompahlumpa
Von meinem Verständnis nicht Pseudo-Elemente stapeln
Sie können.
.topMenuLowerSiteMenu li:nth-child(1)::before {
color: red;
}
.topMenuLowerSiteMenu li:nth-child(2)::before {
color: green;
}
.topMenuLowerSiteMenu li:nth-child(3)::before {
color: blue;
}
... etc
Ja. Verwenden Sie dieses Format:
li:nth-child(1):before {
color: red;
}
li {
list-style-type: none;
font-size: 30px;
font-family: sans-serif;
}
li:before {
content: '•';
}
li:nth-child(1):before {
color: red;
}
li:nth-child(2):before {
color: blue;
}
li:nth-child(3):before {
color: yellow;
}
li:nth-child(4):before {
color: green;
}
li:nth-child(5):before {
color: purple;
}<ul>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
<li>FIVE</li>
</ul>
[Wie ein Minimal, Complete, und prüfbare Beispiel erstellen] (http://stackoverflow.com/help/mcve) –
Bild nicht geladen . Auch müssen Sie den Code in Ihre Frage setzen wir werden nicht Ihre Website besuchen, um es zu testen – happymacarts