1. Web
  2. CSS
  3. list-style

list-style

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

list-style CSS 簡寫屬性允許您一次性設定所有列表樣式屬性。

試一試

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: " ";
}

此屬性的值應用於列表項，包括 <li> 元素和具有 display: list-item; 的元素。由於此屬性是繼承的，因此可以在父元素（通常是 <ol> 或 <ul>）上設定，以使相同的列表樣式應用於所有巢狀項。

構成屬性

此屬性是以下 CSS 屬性的簡寫：

語法

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;

list-style 屬性以一個、兩個或三個值指定，順序不限。如果同時設定了 list-style-type 和 list-style-image，則在影像不可用時，list-style-type 將用作備用。

值

list-style-type

一個 <counter-style>、<string> 或 none。如果在簡寫中省略，則使用預設的 disc 值。參閱 list-style-type。

list-style-image

一個 <image> 或 none。如果省略，則使用預設的 none 值。參閱 list-style-image。

list-style-position

inside 或 outside。如果省略，則使用預設的 outside 值。參閱 list-style-position。

none

不使用列表樣式。

正式定義

初始值作為簡寫中的每個屬性
應用於列表項
繼承性是
計算值作為簡寫中的每個屬性
動畫型別作為簡寫中的每個屬性

正式語法

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

無障礙

如果無序列表或有序列表的 list-style 值為 none，除非列表巢狀在 <nav> 導航元素中，否則 Safari 不會將它們識別為可訪問性樹中的列表。此行為是有意的，不被視為錯誤。

為確保列表被宣佈為列表，請在 <ol> 和 <ul> 元素中新增 role="list"，特別是當列表未巢狀在 <nav> 中時。這可以在不影響設計的情況下恢復列表語義。

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

如果 ARIA role 不適用於您的程式碼，可以使用 CSS 代替。在每個列表項之前新增非空偽內容（如文字或影像）可以恢復列表語義，但這會影響視覺外觀。Safari 會判斷新增的偽內容是否足以作為可訪問內容，如果足夠，則恢復列表語義。通常，Safari 認為文字和影像是足夠的，這就是下面顯示的 content: "+ "; 起作用的原因（但需要額外的樣式以不影響設計）。

css
ul {
  list-style: none;
}

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

content: "";（空字串）宣告會被忽略，只包含空格的 content 值（例如 content: " ";）也會被忽略。

這些 CSS 變通方法僅應在無法使用 HTML 解決方案時使用，並且僅在測試以確保它們不會導致可能對使用者體驗產生負面影響的意外行為之後使用。

示例

設定列表樣式型別和位置

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;
}

結果

規範

規範
CSS 列表與計數器模組第 3 級
# list-style-property

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者於 修改。

在 GitHub 上檢視此頁面 • 報告此內容問題
© . Content available under a Creative Commons license.