CSS-Eigenschaft `list-style`

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Kurzform-Eigenschaft list-style ermöglicht es Ihnen, alle Eigenschaften für den Listenstil 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: "\1F680" "\1F6F8" "\1F6F0" "\1F52D";
  suffix: " ";
}

Bestandteileigenschaften

Diese Eigenschaft ist eine Kurzform 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 Eigenschaft list-style wird als ein, zwei oder drei Werte in beliebiger Reihenfolge angegeben. Wenn sowohl list-style-type als auch list-style-image festgelegt 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 Kurzform ausgelassen, ist der Standardwert disc. Siehe list-style-type.
list-style-image: Ein <image> oder none. Wenn ausgelassen, ist der Standardwert none. Siehe list-style-image.
list-style-position: Entweder inside oder outside. Wenn ausgelassen, ist der Standardwert outside. Siehe list-style-position.
none: Es wird kein Listenstil verwendet.

Beschreibung

Die Eigenschaft list-style ermöglicht Ihnen, das Erscheinungsbild von Listenelementen anzupassen. Die Werte dieser Eigenschaft werden auf Listenelemente angewendet, einschließlich <li>-Elementen und Elementen mit display: list-item;.

Vererbung des Listenstils

Da die Langform-Eigenschaft list-style-type vererbt wird, kann list-style für ein übergeordnetes Element (normalerweise <ol> oder <ul>) festgelegt werden, damit dieselbe Listengestaltung auf dessen Listenelemente angewendet wird. User-Agent-Stylesheets legen jedoch list-style-type für <ul>, <ol> und <menu>-Elemente fest, sodass verschachtelte Listen diese Standardwerte verwenden, anstatt den list-style der übergeordneten Liste zu erben. Die Werte von list-style-position und list-style-image werden normalerweise in verschachtelte Listen vererbt. Damit verschachtelte Listen auch den Markierungstyp erben, setzen Sie list-style oder list-style-type für die verschachtelten Listenelemente auf inherit.

Beispielsweise in Fällen wie diesem:

html

<ul>
  <li>One</li>
  <li>Two</li>
  <li>
    Three
    <ul>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
    </ul>
  </li>
</ul>

Bei denen für die äußere Liste ein benutzerdefinierter Stil festgelegt ist:

css

body > ul {
  list-style: square;
}

Die innere Liste erbt den benutzerdefinierten Stil nicht, sofern Sie sie nicht auf Vererbung setzen:

css

ul ul {
  list-style: inherit;
}

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 Navigationselements <nav> verschachtelt. Dieses Verhalten ist beabsichtigt und wird nicht als Fehler betrachtet.

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. Dadurch wird die Listensemantik wiederhergestellt, ohne das Design zu beeinflussen:

html

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

Wenn eine ARIA-role für Ihren Code keine Option ist, kann stattdessen CSS verwendet werden. Das Hinzufügen von nicht leerem Pseudo-Inhalt wie Text oder Bildern vor jedem Listenelement kann die Listensemantik wiederherstellen, wirkt sich jedoch auf das visuelle Erscheinungsbild aus. Safari bestimmt, ob der hinzugefügte Pseudo-Inhalt als barrierefreier Inhalt ausreicht, und stellt die Listensemantik wieder her, wenn dies der Fall ist. Im Allgemeinen betrachtet Safari Text und Bilder als ausreichend, weshalb das unten gezeigte content: "+ "; funktioniert (jedoch zusätzliches Styling erfordert, damit das Design nicht beeinträchtigt wird).

css

ul {
  list-style: none;
}

ul li::before {
  content: "+ ";
}

Eine Deklaration von content: ""; (eine leere Zeichenfolge) wird ignoriert, ebenso wie content-Werte, die nur Leerzeichen enthalten, etwa content: " ";.

Diese CSS-Workarounds sollten nur verwendet werden, wenn keine HTML-Lösung verfügbar ist, und erst nach Tests, um sicherzustellen, dass sie nicht zu unerwarteten Verhaltensweisen führen, die sich negativ auf die Benutzererfahrung auswirken können.

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> )  

<counter-style-name> = 
  <custom-ident>  

<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

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

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

Browser-Kompatibilität

Siehe auch

Komponenten-Eigenschaften: list-style-type, list-style-image und list-style-position
Pseudo-Element ::marker
Modul CSS-Listen und -Zähler
Modul CSS-Zählerstile

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

CSS-Eigenschaft list-style

HTML

CSS

Ergebnis

Help improve MDN

CSS-Eigenschaft `list-style`