我有 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 中做这样的事情吗？
最佳答案
(还)无法在 native CSS 中执行此操作。您可以使用像 LESS 这样的预处理器，但这会生成相同的输出，只是增加了编译它的麻烦，因此就此布局而言，您当前的方法是最佳方法。
一个可能的优化是从所有图像创建一个完整的 Sprite ，将其设置为 background-image对于所有带有 1 个选择器的元素，例如 [class*=".icon-agenda.day-"], [class*=".icon-agenda.day-"]:before , 并更改 background-position的独立元素。这将节省您的请求，意味着更快的页面加载。
根据您关于使用 JavaScript 的评论，这里有一个解决方案将添加一个额外的 <style>标记到 <head>使用您的 CSS 的页面:
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);
关于css - 如何用一个替换 31 个 css 类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25821269/