css - 基于列表项文本值的 css 样式

Question

我正在使用降价来生成文档，并且我希望能够根据该列表项的文本值将自定义图像用于列表项。我对生成的 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 中指定深度来创建嵌套文件夹结构。结果是这样的：