在HTML中，对于有序列表和无序列表这两个的列表项符号，都是使用type属性来定义的。使用type属性来定义列表项符号，那是在HTML的“元素属性”中定义的。但是之前说过，结构和样式应该是分离的。那么在CSS中，我们应该怎样定义列表项符号呢？

一、定义列表项符号

在CSS中，不管是有序列表还是无序列表，我们都是使用list-style-type属性来定义列表项符号。

语法：

list-style-type: 取值;

说明：

list-style-type属性是针对ol或者ul元素的，而不是li元素。其中，list-style-type属性取值如下表所示。

表1 ol的list-style-type属性取值
属性值 说明
decimal 阿拉伯数字：1、2、3…（默认值）
lower-roman 小写罗马数字：i、ii、iii…
upper-roman 大写罗马数字：I、II、III…
lower-alpha 小写英文字母：a、b、c…
upper-alpha 大写英文字母：A、B、C…
表2 ul的list-style-type属性取值
属性值 说明
disc 实心圆●（默认值）
circle 空心圆○
square 正方形■

举例：有序列表

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        ol{list-style-type:lower-roman;}
    </style>
</head>
<body>
    <h3>有序列表</h3>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
</body>
</html>

浏览器预览效果如下图所示。

举例：无序列表

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        ul{list-style-type:circle;}
    </style>
</head>
<body>
    <h3>无序列表</h3>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

浏览器预览效果如下图所示。

二、去除列表项符号

在CSS中，我们也是使用list-style-type属性来去除有序列表或无序列表的列表项符号的。

语法：

list-style-type: none;

说明：

由于列表项符号比较丑，因此在实际开发中，大多数情况下我们都需要使用list-style-type:none;去掉。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        ol,ul{list-style-type:none;}
    </style>
</head>
<body>
    <h3>有序列表</h3>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
    <h3>无序列表</h3>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

浏览器预览效果如下图所示。

分析：

使用list-style-type:none这个小技巧可以去除列表项默认的符号，在实际开发中，我们经常会用到。

ol,ul{list-style-type:none;}使用的是“群组选择器”。当对多个不同元素定义了相同的CSS样式时，我们就可以使用群组选择器。在群组选择器中，元素之间是用英文逗号隔开的，而不是中文逗号。

常见问题：

1、list-style-type有那么多的属性值，怎么记得住呢？

我们只需要记住list-style-type:none;这一个就可以了，其他的不需要记住。因为在实际开发中，对于使用list-style-type属性来定义列表项符号，几乎用不上。所以那些属性值也不需要去记忆。退一步来说，就算用得上，我们不是还有HBuilder提示么？