Verwendung von Markierungs-Tags im CSS-Listenmodell

In diesem Artikel werden hauptsächlich die Stilattribute ::master , list-style-image und list-style-type unter list-item vorgestellt und ihre praktische Verwendung erläutert. Es gibt weitere, weniger gebräuchliche Stilattribute unter list-item , die hier nicht vorgestellt werden. Wenn Sie interessiert sind, können Sie zum CSS-Standarddokument wechseln

Was ist ::marker

::marker ist ein Pseudoelement, das Inhalt definieren kann, der in list-item eingefügt wird, um das Listenelement darzustellen. Es wird ein Beispiel bereitgestellt, um seine Funktion deutlich zu zeigen.

<Stil>
li::marker { Inhalt: "(" Zähler(Listenelement) ")"; }
li { Anzeige: Listenelement; }
</Stil>

<ul>
  <li>zhaodao88.com Geschäftsmöglichkeiten finden</li>
  <li>zhaodao88.com Verbindungen finden</li>
  <li>zhaodao88.com Suche nach Einkäufen</li>
</ul>

Effektbild:

Hier definiert marker Markierungselement die Markierung vor jedem Listenelement, und der Inhalt im content ist der Inhalt, der vor dem Listenelement eingefügt werden soll.

Verwenden Sie ::marker, um den Markerinhalt zu füllen

Es ist zu beachten, dass normale Elemente, marker verwenden möchten, als display: list-item definiert werden müssen. list-items generieren bei ihrer Erstellung automatisch marker und counter .

Der Markierungsstil kann mit list-style-type und list-style-image oder direkt mit dem Pseudoelement ::marker geschrieben werden. Unten sehen Sie ein Beispiel.

Verwenden Sie ::marker um den Marker zu steuern. Der content des Pseudoelements ist der Inhalt des Markers.

<Stil>
  p { Rand links: 12 em; }
  p.note {
    Anzeige: Listenelement;
    Zählerinkrement: Notenzähler;
  }
  p.note::marker {
    Inhalt: "Hinweis " Zähler(Hinweis-Zähler) ":";
    Farbe: blau;
    Schriftstärke: fett;
  }
</Stil>
<p>zhaodao88.com Geschäftsmöglichkeiten finden</p>
<p class="note">zhaodao88.com Suche nach Einkäufen</p>
<p>zhaodao88.com Verbindungen finden</p>

Der Effekt ist wie gezeigt:

Natürlich können Sie auch Schriftstil, Farbe und andere Attribute für den Marker festlegen, ähnlich dem obigen Effekt li::marker { color: blue; font-weight:bold; }

Es ist zu beachten, dass derzeit nur die folgenden Attribute für marker -Pseudoelement verwendet werden können

• Alle Schriftstile: Schriftartbezogen
• White-space-Eigenschaft
• Das Farbattribut
• Text-Combine-Upright, Unicode-Bidi, Richtungseigenschaften
• Das Inhaltsattribut
• Alle Animations- und Übergangseigenschaften

Es gibt ein Problem , das darauf hindeutet, dass die Verwendung von white-space: pre in Markup möglicherweise keine gute Wirkung hat. Sie können versuchen text-space-collapse: preserve-spaces und text-space-trim: discard-after zusammen zu verwenden, um den gewünschten Effekt zu erzielen. Wenn Sie interessiert sind, gehen Sie bitte zu Problem 4448 und Problem 4891

Verwenden Sie ein Bild im Listenstil, um den Tag-Inhalt auszufüllen

Geben Sie ein Markierungsbild an. Wenn der Inhalt des Listenelements normal ist, wird die Markierung des Listenelements mit dem angegebenen Bild gefüllt.

Der normale Wert von list-style-image ist <image> | none . Wenn es nicht definiert ist, ist es none . Es gilt für Listenelemente list-items . Wobei <image> verwendet wird, um url des Markierungsbildes anzugeben. Referenzlink

Nachfolgend sehen Sie ein Anwendungsbeispiel, bei dem der <li> -Tag-Block mit dem ellipse.png Bild des angegebenen Links gefüllt wird.

li { Listenstil-Bild: URL("http://www.example.com/ellipse.png") }

Verwenden Sie den Texttyp im Listenstil, um den Tag-Inhalt auszufüllen

Geben Sie eine Markierungszeichenfolge an. Wenn der Inhalt des Listenelements normal ist, füllen Sie die Listenelementmarkierung mit der angegebenen Zeichenfolge.

Der normale Wert von list-style-type ist <counter-style> | <string> | none . Wenn er nicht definiert ist, ist er disc(圓形標記符) und wird auf Listenelemente list-items angewendet. Referenzlink

<counter-style> ist ein durch CSS definierter Zählerstil, der es Entwicklern ermöglicht, den Stil counter anzupassen. Zum Beispiel:

@Counter-Style-Daumen {
 System: zyklisch;
 Symbole: "\1F44D";
 Suffix: " ";
}

ul {
  Listenstiltyp: Daumen;
}

Spezifische <counter-style> -Definitionsregeln-Referenz

Nachfolgend sehen Sie ein Beispiel für die Verwendung list-style-type ( wenn das Element kein Listenelement ist, muss die Anzeige des Elements auf Listenelement eingestellt werden ).

ul { list-style-type: "★"; } // Verwende "★" als Markierung p.note { // Wenn das Zielelement kein Listenelement ist, muss die Anzeige des Elements auf Listenelement eingestellt werden
  Anzeige: Listenelement;
  Listenstiltyp: "Hinweis: ";
  Listenstil-Position: innen;
}

ol { list-style-type: upper-roman; } // Definiert als römische Großbuchstaben ul { list-style-type: symbols(cyclic '○' '●'); } // Die Markierung wechselt zwischen '○' und '●' ul { list-style-type: none; } // Es wird keine Markierung angezeigt

Beachten

::marker Pseudoelement-Tag wird nicht von allen Browsern unterstützt, auch nicht von chrome unterstützt ihn nur in Version 80 und höher, wenn experimental Web Platform aktiviert wird. Wenn Sie den Effekt testen möchten, gehen Sie bitte zu chrome://flags , um experimental Web Platform zu aktivieren. Es wird nicht empfohlen, diese Regel in tatsächlichen Projekten anzuwenden. Es wird eher empfohlen, herkömmliche Methoden zum Festlegen des Markup-Blockstils zu verwenden.

Zusammenfassen

Listen sind in Front-End-Projekten weit verbreitet und haben eine breite Palette von Anwendungsszenarien. Persönlich denke ich, ::marker eine Ergänzung zu list-style-image und list-style-text ist. Alle drei definieren den Füllinhalt des Markierungsblocks. image konzentriert sich auf Bilder, text konzentriert sich auf Zeichenfolgen und ::marker kann font , color und andere Stile definieren, jeweils mit eigenen Merkmalen.

siehe

https://www.w3.org/TR/2020/WD-css-lists-3-20200709
https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

Dies ist das Ende dieses Artikels über die Verwendung von Markierungs-Tags im CSS-Listenmodell. Weitere relevante Inhalte zu CSS-Markierungs-Tags finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!