清單

假設你下次購物時打算購買多項商品。清單是呈現這項資訊的常見方式,但如何在購物清單中加入樣式?

<ul>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ul>

建立清單

上述清單以語意元素 (<ul>) 開始,雜貨清單項目 (<li> 元素) 則為子項。檢查每個 <li> 元素,您會發現它們都具有 display: list-item,因此瀏覽器會預設呈現 ::marker

li {
  display: list-item;
}

還有兩種清單類型。

您可以使用 <ol> 建立排序清單,在這種情況下,清單項目會顯示 ::marker 的編號。

<ol>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ol>

說明清單則是使用 <dl> 建立,但這類清單不會使用 <li> 清單項目元素。

<dl>
  <dt>oat milk</dt>
  <dd>- non dairy trendy drink</dd>
  <dt>cereal</dt>
  <dd>- breakfast food</dd>
</dl>

清單樣式

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

您現在已瞭解如何建立清單,因此可以設定清單樣式。首先要探索的 CSS 屬性,是套用至整個清單的屬性。

您可以使用三種清單樣式屬性為範例設定樣式:list-style-positionlist-style-imagelist-style-type

list-style-position

list-style-position 可讓您將項目符號移至 insideoutside 清單項目的內容。預設的 outside 表示清單項目內容中不包含項目符號,而 inside 會在清單項目內容中移動第一個元素。

清單同時包含外部和內部 ::marker,顯示外部 (預設值) 不在清單項目中,而是在清單項目內容方塊內。

list-style-image

list-style-image 可讓您將清單的項目符號替換為圖片。這樣一來,您就能設定圖片 (例如 urlnone),讓項目符號成為圖片、SVG 或 GIF 檔案。您也可以使用任何媒體類型,甚至是資料 URI。

我們來看看如何將每項雜貨商品的圖片新增為 list-style-image

list-style-type

最後一個選項是設定 list-style-type 的樣式,將項目符號變更為已知樣式關鍵字、自訂字串、表情符號等。如要查看所有可能的清單樣式類型,請按這裡

list-style 速記法

有了所有這些個別屬性,您就可以使用 list-style 速記符號,在單一行中設定所有清單樣式:

list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>

list-style 可讓您以任意順序宣告一、兩或三個 list-style 屬性的組合。如果同時設定 list-style-typelist-style-image,當圖片無法使用時,系統會使用 list-style-type 做為備用圖片。

/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
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: unset;

這是本節所述清單樣式中最常用的屬性。其中一個常見的應用是 list-style: none,用於隱藏預設樣式。預設樣式來自瀏覽器,而您經常會看到重設樣式表移除邊距和邊框等清單樣式。您也可以使用這個簡寫符號來設定樣式,例如 list-style: square inside;

到目前為止,範例都著重於整個清單和清單項目的樣式設定,但如果採用更精細的方法呢?

::marker 擬造元素

list-item 標記元素是用於標示清單中每個項目的項目符號、連字號或羅馬數字。

清單中有三個項目,顯示每個項目都是 ::marker 擬似元素。

如果您在開發人員工具中檢查清單,您會看到每個清單項目的 ::marker 元素,即使您未在 HTML 中宣告任何項目。如果進一步檢查 ::marker,您會看到瀏覽器的預設樣式。

::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}

宣告清單時,每個項目都會加上標記,即使 HTML 中沒有使用項目符號或羅馬數字。這是偽元素,因為瀏覽器會為您產生此元素,並提供受限的樣式 API 來指定此元素。進一步瞭解 CSS 子彈的結構。::marker 在 Safari 中僅支援部分功能

標記方塊

在 CSS 版面配置模型中,清單項目標記會以與每個清單項目相關聯的標記方塊表示。標記方塊是通常包含項目符號或數字的容器。

如要設定標記方塊的樣式,您可以使用 ::marker 選取器。這樣一來,您就能只選取標記,而非根據整個清單選取樣式。

標記樣式

選取標記後,我們來看看這個選取器可用的樣式屬性。如要進一步瞭解如何使用 CSS ::marker 自訂項目符號,請前往 web.dev 參閱這篇文章

允許的 CSS ::marker 屬性相當多:

  • animation-*
  • transition-*
  • color
  • direction
  • font-*
  • content
  • unicode-bidi
  • white-space

顯示類型

所有 list-style::marker 屬性都會為 <li> 元素設定樣式,因為它們具有預設的顯示值 list-item。您也可以將非 <li> 的項目加入清單。

方法是新增 display: list-item 屬性。舉例來說,如果您想在標題上使用懸掛式項目符號,可以使用 ::marker 將其變更為其他項目。display: list-item以下範例顯示標題使用 display: list-item 設定樣式,並使用正確的清單標記。

雖然您可以使用 display 將任何內容轉換為清單項目檢視畫面,但如果您要設定的內容確實是清單,則不應使用 display,而應使用正確的清單標記。將項目的外觀變更為清單項目,並不會改變無障礙服務讀取及辨識項目的方式,因此系統不會將其當作清單項目讀取給螢幕閱讀器或 Switch 裝置。您應一律使用語意標記,並盡可能使用 <li> 建立清單。

進行隨堂測驗

測驗你對清單的瞭解

清單項目前方的元素稱為

::bullet
::counter
::marker
::pencil

三種 HTML 清單類型如下:

<ul>
<ol>
<li>
<dl>
<list>
<lo>

下列清單中哪兩種樣式會將樣式套用至 ::marker

display
transition
background-color
color

資源