我的目标是拥有一个文件名列表,并且每个项目附近都会显示该文件扩展名的图片。
有一种很好的方法:
p[icon^=".gif"]
{
background: url(images/gif.png) no-repeat center left)
}
检查'p'元素的icon属性是否以.gif结尾。如果是的话, 它将给定的样式应用于该元素。
但不是定义每种文件类型,我希望它是通用的,因为我有一个带有这种格式图标的文件夹:{file-extansion} .png
如果没有匹配的文件与给定的扩展或没有文件扩展,将有一个默认路径“default.png”。
有选择这样做或部分吗?如果不是,你建议我这样做的方式是什么?
顺便说一句,我不是css / javascript专家,所以请给出足够的详细信息,以便我能理解你的答案。
答案 0 :(得分:1)
您可以使用jQuery library:
<强> HTML 强>
<p data-ext=".gif">Text</p>
<p data-ext=".png">Text</p>
<p data-ext=".jpg">Text</p>
<强> CSS 强>
p {
background-repeat: no-repeat;
background-position: 0 50%;
}
<强>的JavaScript 强>
$("p[data-ext]").each(function() {
var ext = $(this).data("ext").substring(1);
$(this).css("background-image", "url(images/" + ext + ".png)");
});
它的工作原理是您为每个p
(或其他)标记添加data-ext
attribute。 jQuery选择具有p
属性的所有data-ext
标记,然后获取属性值,并更改每个元素的background-image
。
答案 1 :(得分:1)
使用纯CSS,您无法动态引用URL中的属性,但可以将其作为内容。以下是使用纯CSS的一些蹩脚的解决方法,最后是一种一厢情愿的方法:(
<div class="jpg">
</div>
/* css */
.jpg {
background: url("/img/jpg.jpg");
}
这很好用,但每个扩展名需要一个班级。
<div data-ext="jpg"></div>
div[data-ext=jpg] {
background: url(/img/jpg.jpg);
}
有关此方法的更多信息,请参阅: http://css-tricks.com/attribute-selectors/
我使用了data-ext
,因为在HTML中你并不是真的应该添加随机标签,因此HTML创建者给了我们data-*
这是有效的HTML5,我们可以随心所欲地做任何事情。无论哪种方式,您都需要为每个扩展创建一个新的CSS选择器。不好。
<div data-ext="jpg"></div>
div:after {
content: attr(data-ext);
}
您将在div旁边看到扩展名。这几乎可行,但还不够好。
有关CSS函数的更多信息:http://www.suburban-glory.com/blog?page=130
<div data-ext="jpg"></div>
div:after {
content: url("/img/jpg." attr(data-ext));
}
可悲的是,目前这似乎不起作用,但男孩会很棒。