版权声明：本文为博主原创文章，转载请注明出处。 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=)