基于列表项的文本值的 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 中指定深度来创建嵌套文件夹结构。结果是这样的: