向匹配属性的反向引用

Question

我们可以基于attribute matching选择元素。还有没有办法获得对实际匹配值的反向引用？例如，根据匹配的类设置背景图片：

div[class^="icon-"] {
    background-image: url(img/<reference here>.png);
}

代替手动指定每个图标的路径：

.icon-foo {
    background-image: url(img/icon-foo.png);
}

.icon-bar {
    background-image: url(img/icon-bar.png);
}

/* ... and so on ... */

Answer 1

否，很遗憾，仅CSS不可能。但是您可以使用JavaScript：

const icons = document.querySelectorAll('div[class^="icon-"]');
for (icon of icons) {
	icon.style.backgroundImage = `url('img/${icon.classList}.png')`;
}

<div class="icon-home"></div>
<div class="icon-play"></div>
<div class="icon-search"></div>