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

【问题标题】：css styling based on text value of a list item基于列表项文本值的 css 样式
【发布时间】：2013-06-08 20:44:53
【问题描述】：

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

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

如果文本以斜线开头，我想使用文件夹的图像。我希望这样的事情会起作用：

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

但是，没有运气。

【问题讨论】：

你不能只使用 CSS。
不可能。写一些属性，例如：data-text="/myfolder" 以便能够访问它 - 或者只使用一个类。
是什么阻止您控制生成的 HTML？
markdown 规范只允许这样的事情：- /myfolder，它生成
- /myFolder
。 html 是使用 perl 脚本针对降价文本生成的。
如果你知道生成项目的顺序是什么，你可以使用nth-child之类的东西。但最好的方法当然是尝试控制生成的 HTML。

标签： css list icons

【解决方案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 中指定深度来创建嵌套文件夹结构。结果是这样的：

【讨论】：