请问css样式中 能不能改变LI前面小黑点的颜色？（字体颜色和小黑点颜色不一样）

html-css025

请问css样式中 能不能改变LI前面小黑点的颜色？（字体颜色和小黑点颜色不一样）,第1张

结论：

不能直接修改CSS样式改变颜色，但可以通过<span></span>的背景图像来实现

代码：

效果：

原理：

通过设置<li>下<span>的背景图像来实现小红圆点的效果。

上述样式一般通过取消默认的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}

观察对比效果