版權聲明：本文為部落客原創文章，轉載請注明出處。 https://blog.csdn.net/twilight_karl/article/details/54730634
list-style-type
改變清單項的标志。以下的所有的标志類型：
none 無标記
disc 實心圓，預設
circle 空心圓
square 方塊
decimal 數字
decimal-leading-zero 0開頭的數字标記。(01, 02, 03, 等。)
lower-roman 小寫羅馬數字(i, ii, iii, iv, v, 等。)
upper-roman 大寫羅馬數字(I, II, III, IV, V, 等。)
lower-alpha 小寫英文字母(a, b, c, d, e, 等。)
upper-alpha 大寫英文字母(A, B, C, D, E, 等。)
lower-greek 小寫希臘字母(alpha, beta, gamma, 等。)
lower-latin 小寫拉丁字母(a, b, c, d, e, 等。)
upper-latin 大寫拉丁字母(A, B, C, D, E, 等。)
hebrew 傳統的希伯來編号方式
armenian 傳統的亞美尼亞編号方式
georgian 傳統的喬治亞編号方式(an, ban, gan, 等。)
cjk-ideographic 簡單的表意數字
hiragana 标記是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana 标記是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha 标記是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha 标記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）
<html>
<head>
<style type="text/css">
.disc{
list-style-type:disc;
}
.circle{
list-style-type:circle;
}
.square{
list-style-type:square;
}
.decimal{
list-style-type:decimal;
}
.lower-roman{
list-style-type:lower-roman;
}
.lower-alpha{
list-style-type:lower-alpha;
}
.lower-greek{
list-style-type:lower-greek;
}
.lower-latin{
list-style-type:lower-latin;
}
</style>
</head>
<body>
<ul>
<li class="disc">disc 實心圓，預設</li>
<li class="circle">circle 空心圓</li>
<li class="square">square 方塊</li>
<li class="decimal">decimal 數字</li>
<li class="lower-roman">lower-roman 小寫羅馬數字(i, ii, iii, iv, v, 等。) </li>
<li class="lower-alpha">lower-alpha 小寫英文字母(a, b, c, d, e, 等。) </li>
<li class="lower-greek">lower-greek 小寫希臘字母(alpha, beta, gamma, 等。) </li>
<li class="lower-latin">lower-latin 小寫拉丁字母(a, b, c, d, e, 等。) </li>
</ul>
</body>
</html>
list-style-position
inside 清單項目标記放置在文本以内，且環繞文本根據标記對齊。
outside 預設值。保持标記位于文本的左側。清單項目标記放置在文本以外，且環繞文本不根據标記對齊。
<html>
<head>
<style type="text/css">
.inside{
list-style-position:inside;
}
.outside{
list-style-position:outside;
}
</style>
</head>
<body>
<ul class="inside">
<li>inside inside inside</li>
<li>inside inside inside</li>
<li>inside inside inside</li>
</ul>
<ul>
<li>normal normal normal</li>
<li>normal normal normal</li>
<li>normal normal normal</li>
</ul>
<ul class="outside">
<li>outside outside outside</li>
<li>outside outside outside</li>
<li>outside outside outside</li>
</ul>
</body>
</html> list-style-image
以圖檔作為标志
list-style-image:url(url);
none 無
inherit 繼承
<html>
<head>
<style type="text/css">
.image{
list-style-image:url("素材/五角星.png");
}
</style>
</head>
<body>
<ul class="image">
<li>圖檔 圖檔 圖檔 </li>
<li>圖檔 圖檔 圖檔 </li>
<li>圖檔 圖檔 圖檔 </li>
</ul>
</body>
</html>
list-style
簡寫，将所有屬性按照一定順序寫在list-style後，可以不設定某個值，未設定的值将采用預設值。
li {list-style : url(example.gif) square inside}
![css僞類與僞元素差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)