list-style

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

* Some parts of this feature may have varying levels of support.

Die list-style CSS Kurzschreibweise ermöglicht es Ihnen, alle Listenstil-Eigenschaften auf einmal festzulegen.

Probieren Sie es aus

list-style: square;

list-style: inside;

list-style: url("/shared-assets/images/examples/rocket.svg");

list-style: none;

list-style: georgian inside url("/shared-assets/images/examples/rocket.svg");

list-style: georgian outside url("/non-existent.svg");

<section class="default-example" id="default-example">
 <div>
 <p>NASA Notable Missions</p>
 <ul class="transition-all" id="example-element">
 <li>Apollo</li>
 <li>Hubble</li>
 <li>Chandra</li>
 <li>Cassini-Huygens</li>
 <li>Spitzer</li>
 </ul>
 </div>
</section>

.default-example {
 font-size: 1.2rem;
}
#example-element {
 width: 100%;
 background: #be094b;
 color: white;
}
section {
 text-align: left;
 flex-direction: column;
}
hr {
 width: 50%;
 color: lightgray;
 margin: 0.5em;
}
.note {
 font-size: 0.8rem;
}
.note a {
 color: #009e5f;
}
@counter-style space-counter {
 symbols: "1円F680" "1円F6F8" "1円F6F0" "1円F52D";
 suffix: " ";
}

Die Werte dieser Eigenschaft werden auf Listenelemente angewendet, einschließlich <li>-Elementen und Elementen mit display: list-item;. Da diese Eigenschaft vererbbar ist, kann sie auf einem Elternelement (normalerweise <ol> oder <ul>) gesetzt werden, um denselben Listenstil auf alle verschachtelten Elemente anzuwenden.

Bestandteile der Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:

Syntax

css

/* type */
list-style: square;
/* image */
list-style: url("../img/shape.png");
/* position */
list-style: inside;
/* two values */
list-style: georgian outside;
list-style: url("img/pip.svg") inside;
/* three values */
list-style: lower-roman url("img/shape.png") outside;
/* Keyword value */
list-style: none;
/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: revert-layer;
list-style: unset;

Die list-style Eigenschaft wird als ein, zwei oder drei Werte in beliebiger Reihenfolge angegeben. Wenn list-style-type und list-style-image beide gesetzt sind, wird list-style-type als Fallback verwendet, falls das Bild nicht verfügbar ist.

Werte

list-style-type: Ein <counter-style>, <string>, oder none. Wenn in der Kurzschreibweise weggelassen, wird der Standardwert disc verwendet. Siehe list-style-type.
list-style-image: Ein <image> oder none. Wenn weggelassen, wird der Standardwert none verwendet. Siehe list-style-image.
list-style-position: Entweder inside oder outside. Wenn weggelassen, wird der Standardwert outside verwendet. Siehe list-style-position.
none: Kein Listenstil wird benutzt.

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `list-style-type`: `disc` `list-style-position`: `outside` `list-style-image`: `none`
Anwendbar auf	Listenelemente
Vererbt	Ja
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `list-style-image`: The keyword `none` or the computed <image> `list-style-position`: wie angegeben `list-style-type`: wie angegeben
Animationstyp	wie die jeweiligen Kurzschreibweisen: `list-style-image`: diskret `list-style-position`: diskret `list-style-type`: diskret

Formale Syntax

list-style = 
 <'list-style-position'> || 
 <'list-style-image'> || 
 <'list-style-type'> 

<list-style-position> = 
 inside | 
 outside 

<list-style-image> = 
 <image> | 
 none 

<list-style-type> = 
 <counter-style> | 
 <string> | 
 none 

<image> = 
 <url> | 
 <image()> | 
 <image-set()> | 
 <cross-fade()> | 
 <element()> | 
 <gradient> 

<counter-style> = 
 <counter-style-name> | 
 <symbols()> 

<image()> = 
 image( <image-tags>? [ <image-src>? , <color> ? ]! ) 

<image-set()> = 
 image-set( <image-set-option># ) 

<cross-fade()> = 
 cross-fade( <cf-image># ) 

<element()> = 
 element( <id-selector> ) 

<symbols()> = 
 symbols( <symbols-type>? [ <string> | <image> ] + ) 

<image-tags> = 
 ltr | 
 rtl 

<image-src> = 
 <url> | 
 <string> 

<image-set-option> = 
 [ <image> | <string> ] [ <resolution> || type( <string> ) ] ? 

<cf-image> = 
 [ <image> | <color> ] && 
 <percentage [0,100]> ? 

<id-selector> = 
 <hash-token> 

<symbols-type> = 
 cyclic | 
 numeric | 
 alphabetic | 
 symbolic | 
 fixed

Barrierefreiheit

Safari erkennt geordnete oder ungeordnete Listen im Barrierefreiheitsbaum nicht als Listen, wenn sie einen list-style Wert von none haben, es sei denn, die Liste ist innerhalb des <nav>-Navigationselements verschachtelt. Dieses Verhalten ist beabsichtigt und wird nicht als Fehler angesehen.

Um sicherzustellen, dass Listen als Listen angesagt werden, fügen Sie role="list" zu <ol> und <ul> Elementen hinzu, insbesondere wenn die Liste nicht in einem <nav> verschachtelt ist. Dies stellt die Listensemantik wieder her, ohne das Design zu beeinflussen:

html

<ul role="list">
 <li>An item</li>
 <li>Another item</li>
</ul>

Wenn ein ARIA role für Ihren Code keine Option ist, kann stattdessen CSS verwendet werden. Das Hinzufügen von nicht-leeren Pseudo-Inhalten wie Text oder Bildern vor jedem Listenelement kann die Listensemantik wiederherstellen, beeinflusst jedoch das visuelle Erscheinungsbild. Safari bestimmt, ob der hinzugefügte Pseudo-Inhalt als zugänglicher Inhalt ausreichend ist und stellt die Listensemantik in diesem Fall wieder her. Generell betrachtet Safari Text und Bilder als ausreichend, weshalb content: "+ "; nachstehend funktioniert (erfordert jedoch zusätzliches Styling, um das Design nicht zu beeinflussen).

css

ul {
 list-style: none;
}
ul li::before {
 content: "+ ";
}

Eine Deklaration von content: ""; (ein leerer String) wird ignoriert, ebenso wie content-Werte, die nur Leerzeichen enthalten, z.B. content: " ";.

Diese CSS-Workarounds sollten nur verwendet werden, wenn keine HTML-Lösung möglich ist, und erst nach Tests, um sicherzustellen, dass sie nicht zu unerwarteten Verhalten führen, das die Benutzererfahrung negativ beeinflussen könnte.

Beispiele

Listenstiltyp und -position festlegen

HTML

html

List 1
<ul class="one">
 <li>List Item1</li>
 <li>List Item2</li>
 <li>List Item3</li>
</ul>
List 2
<ul class="two">
 <li>List Item A</li>
 <li>List Item B</li>
 <li>List Item C</li>
</ul>

CSS

css

.one {
 list-style: circle;
}
.two {
 list-style: square inside;
}

Ergebnis

[フレーム]

Spezifikationen

Specification
CSS Lists and Counters Module Level 3 # list-style-property

Browser-Kompatibilität

Siehe auch

Komponenteneigenschaften: list-style-type, list-style-image, und list-style-position
::marker Pseudoelement
CSS-Listen und Zähler Modul
CSS-Zählerstile Modul

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden