css中的字符串连接

Question

css中的字符串连接

我想在css中实现以下功能.我如何以在IE8 +中运行的方式执行此操作

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Nie*_*sol 21

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

style每当type使用该属性时,您最好在属性中指定此样式.

我相信这是在规范中,但在任何浏览器中都不支持.https://developer.mozilla.org/en/docs/CSS/attr#Browser_Compatibility (2认同)
`你可以通过用空格分隔来“连接”`这就是我们正在寻找的。 (2认同)

Answer 2

小智 15

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

这在 Firefox 中不起作用并显示为无效 CSS。 (5认同)
我想知道作者是否真的尝试过这些例子。看来这是不可能的，至少对于 var() 示例：/sf/ask/2963105281/ (4认同)
这个建议在 Chrome 中似乎也不起作用。至少我用 `url()` 中的串联来测试它的图像基本 url kinf：https://codepen.io/astaco/pen/VwyQwrz (3认同)
**来自审核队列**：我可以请求您在您的答案中添加更多上下文吗？仅代码答案很难理解。如果您可以在帖子中添加更多信息，这将对提问者和未来的读者有所帮助。 (2认同)
我想知道这个答案怎么能得到这么多人的赞同。第一点和最后一点不起作用（在提供的代码笔中尝试过），在阅读其他评论的背景后，我相信其他两点也不应该起作用。这在今天是不可能的。（PS：大部分答案是后来编辑的，并非全部来自第一作者！） (2认同)

Answer 3

Gor*_*ran 6

不,你不能在纯CSS中这样做,因为CSS语言没有控制结构或类似的东西,它将允许你动态地生成CSS代码.

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

Answer 4

zzz*_*Bov 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');
}

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	12 年，7 月前
查看次数：	22692 次
最近记录：	8 年，5 月前