我们可以将列表样式类型的列表设为绿色点吗？

Question

我们可以列出绿色点列表的样式类型吗？

我的限制是我不想使用列表样式图像，我无法在无序列表中编辑html。

Answer 1

更新naveen的答案，使用子弹角色来获得更好的渲染效果。

ul#mylist{
    list-style-type: square;
}
ul#mylist li:before{
    content: "•";
    margin-right: 10px;
    font-weight: bold;
    color: #00FF00;
}

我想知道这个是否合法，因为代码中包含一个特殊字符。

安托

Answer 2

这里检查一下 HTML：

<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
</ul>

CSS：

ul {
margin:0px 0px 0px 20px;
padding:0px;
}
ul li {
color:green;
}
ul li span{
color:blue;
}

点击此处：http://jsfiddle.net/thilakar/yYkC4/

Answer 3

如果您想使用jQuery来操作HTML。

假设HTML

<ul id="list">
    <li>One</li>
    <li>Two</li>
</ul>

CSS

ul{margin:20px; list-style-type:disc; color:green;}
li span{color:black;}

脚本

$('#list li').each(function(){
    $(this).replaceWith('<li><span>' + $(this).text() + '</span></li>');
}); 

示例：http://jsfiddle.net/jasongennaro/wTkQv/1/

Answer 4

也许我不是世界上最聪明的人，但这是我解决这个问题的方法：

<ul>
<li><p style="color:#4ec3f4; float:left;">&bull;</p>tadam bss</li>
</ul>

• 没有javascript，
• 没有jQuery，
• 没有css技巧/黑客
• 同意wc3

Answer 5

这是一个使用:before

的丑陋黑客

ul#mylist{
    list-style-type: square;
}
ul#mylist li:before{
    content: ".";
    margin-right: 10px;
    font-weight: bold;
    color: #00FF00;
}

在这里演示：http://jsfiddle.net/naveen/MSTvs/