Question

我有一个日历的31个图标，每月的每一天，我的CSS看起来不如我想的那么好。现在我已经：

.icon-agenda.day-1, .icon-agenda.day-1:before{
    background: url(../images/tiles/agenda/1.png) no-repeat;
}

.icon-agenda.day-2, .icon-agenda.day-2:before{
    background: url(../images/tiles/agenda/2.png) no-repeat;
}

.icon-agenda.day-3, .icon-agenda.day-3:before{
    background: url(../images/tiles/agenda/3.png) no-repeat;
}

.icon-agenda.day-4, .icon-agenda.day-4:before{
    background: url(../images/tiles/agenda/4.png) no-repeat;
}

...
.icon-agenda.day-31, .icon-agenda.day-31:before{
    background: url(../images/tiles/agenda/31.png) no-repeat;
}

我想用更简单的代码替换上面的代码，比如

.icon-agenda.day-xxx, .icon-agenda.day-xxx:before{
    background: url(../images/tiles/agenda/xxx.png) no-repeat;
}

我可以在CSS中做这样的事情吗？

Answer 1

（还）无法在本机CSS中执行此操作。您可以使用像LESS这样的预处理器，但这会产生相同的输出，只会增加编译的麻烦，因此就此布局而言，您当前的方法是最优的。

一种可能的优化方法是从所有图片中创建一个完整的精灵，将所有项目设置为background-image，其中包含[class*=".icon-agenda.day-"], [class*=".icon-agenda.day-"]:before等1个选择器，并更改background-position单独的元素。这样可以节省您的请求，从而加快页面加载速度。

根据您对使用JavaScript的评论，这里有一个解决方案，会使用您的CSS向页面的<style>添加额外的<head>标记：

var styl = document.createElement('style');
for (var i=1; i<=31; i++)
    styl.innerHTML += '.icon-agenda.day-'+i+',.icon-agenda.day-'+i+':before{background:url(../images/tiles/agenda/'+i+'.png) no-repeat}';
document.head.appendChild(styl);

Answer 2

在未来的某个时刻，你将能够做到

background-image: attr(data-png url);

将从每个元素的data-png属性中获取网址。

现在它只适用于content CSS属性。请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/attr。

如何用一个替换31个css类

2 个答案: