Schließlich wird es einfach sein, die Farbe der Listenkugeln zu ändern

In meinen Keimjahren war der allgemeine Rat:

• Listelement

 li {Farbe: rot; } /* Kugel */
li span {color: schwarz; } / * text * /

Nicht schrecklich, aber nicht großartig. Sie „Zurücksetzen“ alles auf der Span -Ebene, daher wird es komplizierter, je mehr Sie tun.

Die Dinge werden viel einfacher. Lassen Sie uns einen Spaziergang durch diese Welt machen und so moderner werden, wenn wir gehen.

Eine Alternative bestand darin, das Standard-Listen-Styling abzureißen und es durch ein Pseudoelement zu ersetzen.

 ul {
  Listenstil: Keine;
}

li :: vor {
  Inhalt: "• ";
  Farbe: Rot;
}

Wenn wir zählen müssen, könnten wir das mit CSS -Zählern tun.

 ol {
  Listenstil: Keine;
  Gegenüberlagter: My-Awesome-Counter;
}

ol li {
  Gegeninkrement: My-Awesome-Counter;
}

ol li :: vor {
  Inhalt: Zähler (My-Awesome-Counter) ".
  Farbe: Rot;
}

Kurz beiseite hier: Dies hilft nicht bei der Farbe, aber Sie können angeben, welches Zeichen für die Kugel verwendet werden soll, indem Sie eine Zeichenfolge festlegen, wie:

 ul {
  Listenstil-Typ: '✽';
}

Dies ist als Firefox 39 (2015) und Chrome 79 (der am 9. Dezember 2019 herauskommt).

Für bestellte Listen gibt es eine Menge sprachspezifischer Optionen. Und diese Sprachstile eignen sich auch für CSS -Zähler, über die Sie in Hui Jings tiefem Tauchgang mehr erfahren können.

Aber die ganze Zeit wollten wir nur die dumme Kugel (oder was auch immer es ist) auswählen und sie stylen. Jetzt fangen wir an, genau das zu tun.

Ab Firefox 68 (Juli 2019) können Sie mögen:

 li :: marker {
  Farbe: Rot;
  Inhalt: "►";
}

… Was, wie Sie sehen können, die Farbe und die Kugel, die definitiv der sauberste und einfachste Weg ist, verändert. Es ist also schön, Fortschritte zu sehen.

Tejas demonstriert:

Manuel Matuzović merkt an, dass Sie, wenn Sie ein Element auf einen Listen-Item-Display-Typ einstellen, auch Markierungen verwenden können.

 H2 {
  Anzeige: List-Item;
}

H2 :: Marker {
  Farbe: Orange;
  Inhalt: "☞";
}

Sogar Safari hat zum Zeitpunkt dieses Schreibens Unterstützung, also sollten wir uns hier auf Chrome stützen.

Diese Browser -Support -Daten stammen von Caniuse, was mehr Details enthält. Eine Zahl zeigt an, dass Browser die Funktion in dieser Version und auf.

Desktop

Mobile / Tablet

Das obige ist der detaillierte Inhalt vonSchließlich wird es einfach sein, die Farbe der Listenkugeln zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!