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 Shorthand-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 ein übergeordnetes Element gesetzt werden (normalerweise <ol> oder <ul>), um das gleiche Listendesign auf alle verschachtelten Elemente anzuwenden.

Bestandeigenschaften

Diese Eigenschaft ist eine Zusammenfassung der 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 spezifiziert. Wenn list-style-type und list-style-image beide gesetzt sind, wird list-style-type als Rückfalllösung verwendet, falls das Bild nicht verfügbar ist.

Werte

list-style-type: Ein <counter-style>, <string>, oder none. Falls im Shorthand weggelassen, wird der Standardwert disc verwendet. Siehe list-style-type.
list-style-image: Ein <image> oder none. Falls weggelassen, wird der Standardwert none verwendet. Siehe list-style-image.
list-style-position: Entweder inside oder outside. Falls 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 Barrierefreiheits-Baum an, wenn sie einen list-style-Wert von none haben, es sei denn, die Liste ist im <nav>-Navigations-Element 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. 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 Pseudoinhalten wie Text oder Bilder vor jedem Listenelement kann die Listensemantik wiederherstellen, beeinträchtigt jedoch das visuelle Erscheinungsbild. Safari bestimmt, ob der hinzugefügte Pseudoinhalt als barrierefreier Inhalt ausreichend ist und stellt die Listensemantik entsprechend wieder her. Im Allgemeinen betrachtet Safari Text und Bilder als ausreichend, weshalb das content: "+ "; im folgenden Beispiel funktioniert (erfordert aber zusätzliches Styling, 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 eine HTML-Lösung nicht verfügbar ist, und nur nach Tests, um sicherzustellen, dass sie keine unerwarteten Verhaltensweisen zur Folge haben, die die Benutzererfahrung negativ beeinflussen könnten.

Beispiele

Setzen des Listentyps 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

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

Browser-Kompatibilität

Siehe auch

Bestandteileigenschaften: list-style-type, list-style-image, und list-style-position
::marker Pseudo-Element
CSS-Listen und Zähler Modul
CSS-Zählstile 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