Html css中的字符串连接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15745492/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
string concatenation in css
提问by aWebDeveloper
I want to achieve the following in css. How do i do it in a way that works in IE8+
我想在 css 中实现以下目标。我如何以适用于 IE8+ 的方式进行操作
url('../img/icons/' + attr('type') + '_10.png')
采纳答案by zzzzBov
You can't do dynamic string interpolation in the way that you're suggesting, but if you have a limited number of possible values for the [type]attribute, you could create styles for each one:
您不能按照您建议的方式进行动态字符串插值，但是如果[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');
}
If you've got an unreasonable number of types, then you'll probably need to come up with a better solution than I've listed here.
如果您的类型数量不合理，那么您可能需要想出比我在此处列出的更好的解决方案。
回答by Niet the Dark Absol
I don't think you can. In the contentproperty you can "concatenate" just by separating with a space, but in other places I don't think there is such a feature. Which is a shame.
我不认为你可以。在content属性中，您可以通过用空格分隔来“连接”，但在其他地方我认为没有这样的功能。这是一种耻辱。
You'll probably be best off specifying this style in a styleattribute whenever the typeattribute is used.
style每当type使用属性时，您可能最好在属性中指定此样式。
回答by Goran
No, you can't do this in plain CSS because the CSS language hasn't control structures or anything like that wich will allow you to dinamically generate CSS code.
不，你不能在普通的 CSS 中做到这一点，因为 CSS 语言没有控制结构或类似的东西，可以让你动态地生成 CSS 代码。
Instead, you can use a javascript solutions or a solution based on CSS variables coded in PHP.
相反，您可以使用 javascript 解决方案或基于 PHP 编码的 CSS 变量的解决方案。
回答by Klaus Veber
CSS performs concatenationwithout using any operator (e.g. +, &, etc). Keep your strings in quotes combine the strings, attr, var, etc into one line.
CSS 在不使用任何运算符（例如 +、& 等）的情况下执行连接。将字符串放在引号中，将字符串、attr、var 等合并为一行。
Examples:
例子：
url('not/very' '/useful/concatenation'); // not/very/useful/concatentationurl('../img/icons/' attr('type') '_10.png'); //../img/icons/${type}_10.pngurl(attr('href') '#hash'); // https://${href}/#hashurl(var(--hello) ' world'); // Hello World
url('not/very' '/useful/concatenation'); // not/very/useful/concatentationurl('../img/icons/' attr('type') '_10.png'); //../img/icons/${type}_10.pngurl(attr('href') '#hash'); // https://${href}/#hashurl(var(--hello) ' world'); // Hello World
