在同一句子中的CSS内容，属性和网址

Question

我已经使用 content属性 很长时间了，今天我想尝试一些新的东西。我不想使用JS显示图像工具提示，而是想知道是否可以使用CSS动态地进行操作。

所以我尝试了：

.TableLine:hover:after{
  content: url("../Img/Photo/"attr(id)".jpg"); 
}

attr(id)应该在哪里返回图片的ID（字母数字），它也是图片的名称。

它根本不起作用，没有任何作用。我认为该块没有解析，因为向该块添加边框或背景似乎也没有作用。

当我只使用attr(id)单独的内容而没有url时，它会完美地工作。当我用attr(id)图片的真实名称替换时，它也起作用。

在网上搜索了一会儿之后，我没有找到任何相关内容，所以我在这里。那是一个已知的错误还是我的错误？:)

Answer 1

这既不是错误也不是错误。当前支持的内容语法（CSS2.1）为：

content: normal | none | 
         [ <string> | <uri> | <counter> | attr() |
           open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

即：

• 字面normal，none或inherit

• 或任意数量的这些 陆续 ：

  • 一个字符串- "hello"
  • 一个（恒定）URI- url("image.jpg")
  • 柜台- counter(section)
  • 属性- attr(id)
  • open-quote，close-quote，no-open-quote，no-close-quote

该规范不允许对它们进行“嵌套”，他们只能跟着对方，如：

content: "Photo: " url("../Img/Photo.jpg") attr(id);
/* Which is not what you want */

当前的CSS3草案也不允许这样做。可能-如果已经讨论过-因为大多数用例与表示几乎没有关系，而与实际内容有更多关系。