CSS 列表模型之marker標記

本文主要對::master偽元素、list-item下的list-style-image、list-style-type樣式屬性進行介紹，並介紹了在實際中如何使用。list-item下還有其他不常用的樣式屬性這裡不做介紹。感興趣的可以自行移步css 標準文件

::marker是乙個標記偽元素，能夠定義內容填充在list-item上代表列表項的標誌，先附上乙個例子，就能很清楚地看出它的作用。

>
li::marker
listyle
>
>
>
zhaodao88.com 找商機li
>
>
zhaodao88.com 找人脈li
>
>
zhaodao88.com 找採購li
>
ul>

效果圖：

在這裡，marker為元素定義的是每一項列表項前面的標記符，在偽元素內的content的內容就是要在列表項前面所填充的內容。

需要注意的是，普通元素要想使用marker，必須將元素定義成display: list-item，list-items在建立的時候會自動生成marker和counter。

標記的樣式可以使用list-style-type和list-style-image屬性或者直接使用::marker偽元素進行樣式編寫。下面展示乙個例子。

>
pp.note
p.note::marker
style
>
>
zhaodao88.com 找商機p
>
class
="note"
>
zhaodao88.com 找採購p
>
>
zhaodao88.com 找人脈p
>

效果如圖:

當然也可以為標記設定字型樣式、顏色等屬性，類似上面效果li::marker

值得注意的是：目前只有以下屬性能夠作用於marker偽元素上

white-space屬性

color屬性

text-combine-upright,unicode-bidi,direction屬性

content屬性

所有的animation和transition屬性

有issue提出，在標記使用white-space: pre可能不會有很好的效果，可以嘗試text-space-collapse: preserve-spaces和text-space-trim: discard-after一起使用，更能達到想要的效果，感興趣的請移步 issue 4448

和issue 4891

指定標記影象，當列表項內容正常時，用指定影象填充列表項的標記。

list-style-image正常取值| none，未定義情況下是none，作用在列表項list-items下。其中用於指定標記影象的url。參考鏈結移步

下面是使用例子，將會為標籤的標記塊填充上指定鏈結的ellipse.png影象

li

指定標記字串，當列表項內容正常時，用指定字串填充列表項的標記。

list-style-type正常取值| | none，未定義情況下是disc(圓形標記符)，作用在列表項list-items下。參考鏈結移步

是css 定義的計數器樣式，允許開發者自定義counter的樣式。比如：
@counter-style thumbs
ul
具體定義規則參考

下面是關於list-style-type的使用例子(如果作用元素不是列表元素，則元素的display必須設定為list-item)

ul // 使用"★"作為標記符 p.note ol// 定義為羅馬數字的大寫形式 ul// 標記符在'○'和'●'之間切換 ul // 不顯示標記

::marker偽元素標記不是所有瀏覽器都支援，包括chrome也只是在80以上版本通過啟用experimental web platform才支援，如果你想要測試效果，請前往chrome://flags啟用experimental web platform。並不推薦在實際專案去使用這條規則，更推薦使用常規的做法去設定標記塊樣式。

列表在前端專案中很常見，應用場景也十分廣泛。個人覺得，::marker偽元素是對list-style-image和list-style-text的補充，三者都是定義標記塊的填充內容，image注重影象，text注重字串，::marker則可以定font、color等樣式，各具特色。

CSS 列表模型之marker標記

CSS盒子模型列表模型

CSS之盒模型

CSS基礎之布局模型

CSS 列表模型之marker標記

CSS盒子模型 列表模型

CSS之盒模型

CSS基礎之布局模型

相關推薦

CSS盒子模型列表模型