1、先用html做一个原始的无序列表，代码如下：
<!doctype html><html><body><ul> <li>苹果</li> <li>橘子</li> <li>香蕉</li></ul></body></html>
可以看到拆分视图显示出了效果，文字和圆点都是黑色，如图所示。
2、添加一个CSS内联样式表，将列表颜色设置成红色（当然也可以根据需要设置其他颜色，这里红色只是举个例子）。代码如下：
<!doctype html><html>
<head> <style type="text/css"> ul{color:red} </style></head>
<body> <ul> <li>苹果</li> <li>橘子</li> <li>香蕉</li> </ul></body>
</html>
此时的效果是，圆点和文字同时变成红色，如图所示。
3、在CSS中，再设置文字颜色为原本的黑色。代码如下：
<!doctype html><html>
<head> <style type="text/css"> ul{color:red} .p{color:black} </style></head>
<body> <ul> <li><b class="p">苹果</b></li> <li><b class="p">橘子</b></li> <li><b class="p">香蕉</b></li> </ul></body>
</html>
大功告成，效果如图所示。
1、鉴于CSS是层叠样式表，这里我们可以把列表的颜色想象成是我们刷上去的。第一层把所有的东西都刷成红色，第二层再把文字刷成黑色，这样第二层没有被刷上的圆点就会保持原来的颜色，也就是红色。
