CSS 列表模型之marker標記
本文主要對::master偽元素、list-item下的list-style-image、list-style-type樣式屬性進行介紹，並介紹了在實際中如何使用。list-item下還有其他不常用的樣式屬性這里不做介紹。感興趣的可以自行移步CSS 標准文檔
::marker 是什么
::marker是一個標記偽元素，能夠定義內容填充在list-item上代表列表項的標志，先附上一個例子，就能很清楚地看出它的作用。
<style>
li::marker { content: "(" counter(list-item) ")"; }
li { display: list-item; }
</style>
<ul>
<li>zhaodao88.com 找商機</li>
<li>zhaodao88.com 找人脈</li>
<li>zhaodao88.com 找采購</li>
</ul>
效果圖：
在這里，marker為元素定義的是每一項列表項前面的標記符，在偽元素內的content的內容就是要在列表項前面所填充的內容。
使用::marker填充標記內容
需要注意的是，普通元素要想使用marker，必須將元素定義成display: list-item，list-items在創建的時候會自動生成marker和counter。
標記的樣式可以使用list-style-type和 list-style-image屬性或者直接使用::marker偽元素進行樣式編寫。下面展示一個例子。
用::marker偽元素對標記進行控制，偽元素內content的內容就是標記符的內容
<style>
p { margin-left: 12 em; }
p.note {
display: list-item;
counter-increment: note-counter;
}
p.note::marker {
content: "Note " counter(note-counter) ":";
color: blue;
font-weight: bold;
}
</style>
<p>zhaodao88.com 找商機</p>
<p class="note">zhaodao88.com 找采購</p>
<p>zhaodao88.com 找人脈</p>
效果如圖:
當然也可以為標記設置字體樣式、顏色等屬性，類似上面效果li::marker { color: blue; font-weight:bold; }
值得注意的是：目前只有以下屬性能夠作用於marker偽元素上
所有的字體樣式：font相關
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圖像填充標記內容
指定標記圖像，當列表項內容正常時，用指定圖像填充列表項的標記。
list-style-image 正常取值 <image> | none，未定義情況下是 none，作用在列表項list-items下。其中<image>用於指定標記圖像的url。參考鏈接移步
下面是使用例子，將會為<li>標簽的標記塊填充上指定鏈接的ellipse.png圖像
li { list-style-image: url("http://www.example.com/ellipse.png") }
1
使用list-style-type文本類型填充標記內容
指定標記字符串，當列表項內容正常時，用指定字符串填充列表項的標記。
list-style-type 正常取值 <counter-style> | <string> | none，未定義情況下是 disc(圓形標記符)，作用在列表項list-items下。參考鏈接移步
<counter-style>是CSS 定義的計數器樣式，允許開發者自定義counter的樣式。比如：
@counter-style thumbs {
system: cyclic;
symbols: "\1F44D";
suffix: " ";
}
ul {
list-style-type: thumbs;
}
具體<counter-style>定義規則參考
下面是關於list-style-type的使用例子(如果作用元素不是列表元素，則元素的display必須設置為list-item)
ul { list-style-type: "★"; } // 使用"★"作為標記符
p.note { // 如果作用元素不是列表元素，則元素的display必須設置為list-item
display: list-item;
list-style-type: "Note: ";
list-style-position: inside;
}
ol { list-style-type: upper-roman; } // 定義為羅馬數字的大寫形式
ul { list-style-type: symbols(cyclic '○' '●'); } // 標記符在'○'和'●'之間切換
ul { list-style-type: none; } // 不顯示標記
注意
::marker偽元素標記不是所有瀏覽器都支持，包括chrome也只是在80以上版本通過啟用experimental Web Platform才支持，如果你想要測試效果，請前往chrome://flags啟用experimental Web Platform。並不推薦在實際項目去使用這條規則，更推薦使用常規的做法去設置標記塊樣式。
總結
列表在前端項目中很常見，應用場景也十分廣泛。個人覺得，::marker偽元素是對list-style-image和list-style-text的補充，三者都是定義標記塊的填充內容，image注重圖像，text注重字符串，::marker則可以定font、color等樣式，各具特色。