html - css中的字符串连接

Question

我想在 css 中实现以下目标。我如何以适用于 IE8+ 的方式进行操作

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

Answer 1

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

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

Answer 2

CSS 在不使用任何运算符（例如 +、& 等）的情况下执行连接。将字符串放在引号中，将字符串、attr、var 等组合成一行。

例子：

• url('not/very' '/useful/concatenation'); // not/very/useful/concatentation
• url('../img/icons/' attr('type') '_10.png'); //../img/icons/${type}_10.png
• url(attr('href') '#hash'); // https://${href}/#hash
• url(var(--hello) ' world'); // Hello World

Answer 3

不，你不能在纯 CSS 中做到这一点，因为 CSS 语言没有控制结构或任何类似的东西，它可以让你动态地生成 CSS 代码。

相反，您可以使用 javascript 解决方案或基于 PHP 编码的 CSS 变量的解决方案。

Answer 4

您不能按照建议的方式进行动态字符串插值，但如果[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');
}

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