css中的字符串连接

Question

我想在css中实现以下。我如何以跨浏览器的方式做到这一点？

 url('../img/icons/' + attr('type') + '_10.png')

原文由 aWebDeveloper 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不能按照建议的方式进行动态字符串插值，但是如果 [type] 属性的可能值数量有限，则可以为每个创建样式：

 .your .selector[type="foo"] {
    background-image: url('../img/icons/foo_10.png');
}
.your .selector[type="bar"] {
    background-image: url('../img/icons/bar_10.png');
}
.your .selector[type="baz"] {
    background-image: url('../img/icons/baz_10.png');
}

如果您的类型数量不合理，那么您可能需要提出比我在此处列出的更好的解决方案。

原文由 zzzzBov 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我不认为你可以。在 content 属性中，您可以通过用空格分隔来“连接”，但在其他地方我认为没有这样的功能。这是一种耻辱。

每当使用 type 属性时，您最好在 style 属性中指定此样式。

原文由 Niet the Dark Absol 发布，翻译遵循 CC BY-SA 3.0 许可协议