各位大侠CSS中list-style-type属性前面小圆圈的颜色可以设置吗？系统默认是黑色的我想搞成红的应怎么设置

html-css021

各位大侠CSS中list-style-type属性前面小圆圈的颜色可以设置吗？系统默认是黑色的我想搞成红的应怎么设置,第1张

list-style的颜色可以自己根据需要设置，方法是给<ul>标签加上color属性值，这样就会改变list-style 的颜色，并且不会影响文字的颜色：

例如：

html代码为：<ul><li><a href="#" title="百家合符">百家合符</li></ul>

css样式代码：ul {padding-left:15pxcolor:#d1c098}

li {height:20pxline-height:20pxlist-style:square}

大小可以通过给<ul>标签加font-size改变，不过存在兼容性问题（ie6不支持）

详情可查考：http://blog.sina.com.cn/s/blog_6540a3c50100j3qi.html

上述样式一般通过取消默认的list标记，然后以图片的形式实现；但是，也可以直接设置li的样式实现，思路是在li标签下嵌套span标签，然后将li的样式设置为红色，字号较大，而span为正常的样式。下面给出后者的实例演示：

创建Html元素

<div class="box">

<span>通过设置li及其子元素span的不同样式将li默认的黑色标记改为红色，且显示较大：</span><br>

<div class="content">

<ul class="test">

  <li><span>Glen</span></li>

  <li><span>Tane</span></li>

  <li><span>John</span></li>

  <li><span>Ralph</span></li>

</ul>

</div>

<div class="content">

<ul>

  <li>Glen</li>

  <li>Tane</li>

  <li>John</li>

  <li>Ralph</li>

</ul>

</div>

</div>

设置css样式

div.box{width:300pxpadding:20pxmargin:20pxborder:4px dashed #ccc}

div.box>span{color:#999font-style:italic}

div.content{width:250pxmargin:10px 0padding:20pxborder:2px solid #ff6666}

li{margin:5px 0}

ul.test li{color:redfont-size:30px}

ul.test li span{display:inline-blockcolor:blackfont-size:16px}

观察对比效果