基于列表项的文本值的CSS样式

Question

我正在使用markdown生成文档，我希望能够根据该列表项的文本值为列表项使用自定义图像。我对生成的html没有任何控制权，所以css需要由文本值驱动。例如：

<ul>
<li>/myFolder</li>
</ul>

如果文字以斜线开头，我想使用文件夹的图像。 我希望这样的东西能起作用：

li[li^='/']
{
list-style-image:url(images/folder.png); 
}

但是，没有运气。

Answer 1

我能够使用伪链接获得所需的结果。

这是css：

a:link[href^='#folder']
{
    margin-top: 4px;
    display:inline-block;
    line-height:18px;
    padding-left:20px;
    background:transparent url(images/folder.png) center left no-repeat;
}
a:link[href^='#folder2']
{
    margin-left: 20px;
}

a:link[href^='#folder3']
{
    margin-left: 40px;
}

a:link[href^='#folder4']
{
    margin-left: 60px;
}

这允许我通过指定href中的深度来创建嵌套文件夹结构。结果是这样的：