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 Kurzschreib-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>-Elemente und Elemente mit display: list-item;. Da diese Eigenschaft vererbt wird, kann sie auf einem Elternelement (normalerweise <ol> oder <ul>) festgelegt werden, um denselben Listenstil auf alle geschachtelten Elemente anzuwenden.

Zusammengesetzte 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 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 im Kurzschreibstil 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: Es wird kein Listenstil 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> )  

<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 betrachtet.

Um sicherzustellen, dass Listen als solche angekündigt 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 keine Option für Ihren Code ist, kann stattdessen CSS verwendet werden. Das Hinzufügen von nicht-leerem Pseudo-Content wie Text oder Bildern vor jedem Listenelement kann die Listensemantik wiederherstellen, hat jedoch Auswirkungen auf das visuelle Erscheinungsbild. Safari entscheidet, ob der hinzugefügte Pseudo-Content als barrierefreier Inhalt ausreicht, um die Listensemantik wiederherzustellen. In der Regel hält Safari Text und Bilder für ausreichend, weshalb das content: "+ "; unten funktioniert (erfordert jedoch zusätzliche Formatierung, um das Design nicht zu beeinträchtigen).

css

ul {
  list-style: none;
}

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

Eine Deklaration von content: ""; (eine leere Zeichenkette) 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 keine unerwarteten Verhalten hervorrufen, die die Benutzererfahrung negativ beeinflussen könnten.

Beispiele

Festlegen von Listentyp und 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

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 Pseudo-Element
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