在同一句话中使用Css Content、Attr和Url

Question

我长期以来一直使用内容属性，今天我想尝试一些新的东西。我想知道是否可以使用CSS动态地显示图片工具提示，而不是使用JS。

所以我尝试了：

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

attr(id)应该返回图片的ID（字母和数字），同时也是图片的名称。

但它根本不起作用。我认为这个块没有被解析，因为将边框或背景添加到块中似乎也没有效果。

当我仅使用attr(id)而不带上URL时，它可以完美地工作。当我用实际的图片名称替换attr(id)时，也可以正常工作。

在网上搜索了一会儿后，我没有找到任何相关的信息，所以我来问了。这是已知的错误还是我的错误？ :)

- h1fra

---

我认为attr(id)只适用于字符串，而不适用于url。 - elclanrs

这确实是我的问题的重点，为了确定这一点。>< - h1fra

Answer 1

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

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

I.e.:

• 字面意义上的 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草案也不允许这样做。如果已经讨论过，可能是因为大多数用例与演示无关，而与实际内容有关。

- JimmiTh

---

啊，好吧，那就解释了一切 :/ 有点遗憾它没有被讨论，用CSS代替JS可能会很棒！ 谢谢 :) - h1fra

Answer 2

截至2012年8月28日的W3C候选推荐中，有一种语法可以指定由attr()返回的类型。

具体描述在这里。

简而言之，以下内容可行：

content: attr(id url);

但似乎仍无法将其与其他字符串连接起来，这很烦人。

总之，目前似乎还没有任何实现。

请检查浏览器兼容性。

- Joe Thomas

---

"attr" 基本上是 CSS 世界中备受忽视的角色。它具有强大的功能，但没有人愿意让它发挥作用。 :( - Kevin Peno