`list-style` CSS-Eigenschaft

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.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die list-style CSS Kurzform Eigenschaft ermöglicht es Ihnen, alle Listeneigenschaften 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: " ";
}

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

Bestandteilige Eigenschaften

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 list-style-Eigenschaft wird mit einem, zwei oder drei Werten 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 im Kurzformausdruck nicht angegeben, wird der Standardwert disc verwendet. Siehe list-style-type.
list-style-image: Ein <image> oder none. Wenn nicht angegeben, wird der Standardwert none verwendet. Siehe list-style-image.
list-style-position: Entweder inside oder outside. Wenn nicht angegeben, wird der Standardwert outside verwendet. Siehe list-style-position.
none: Kein Listenstil wird verwendet.

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

Barrierefreiheit

Safari erkennt geordnete oder ungeordnete Listen nicht als Listen im Barrierefreiheitsbaum, 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 solche 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 ohne Beeinträchtigung des Designs wieder her:

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-Content wie Text oder Bilder vor jedem Listenelement kann die Listensemantik wiederherstellen, beeinflusst jedoch das visuelle Erscheinungsbild. Safari bestimmt, ob der hinzugefügte Pseudo-Content als barrierefreie Inhalte ausreicht, und stellt die Listensemantik wieder her, wenn dies der Fall ist. Im Allgemeinen werden von Safari Text und Bilder als ausreichend erachtet, weshalb das unten gezeigte content: "+ "; funktioniert (erfordert jedoch zusätzliche Stylingmaßnahmen, um das Design nicht zu beeinträchtigen).

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, wie content: " ";.

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

Beispiele

Festlegen des Listenstiltyps und der Position

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

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

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

list-style CSS-Eigenschaft

HTML

CSS

Ergebnis

Help improve MDN

`list-style` CSS-Eigenschaft