Question

我已经使用内容属性很长一段时间了，今天我想尝试新的东西。我没有使用JS来显示图像工具提示，而是想知道是否可以使用CSS动态地执行它。

所以我试过了：

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

其中attr(id)应该返回图片的ID（字母数字），这也是图片的名称。

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

当我只使用attr(id)时，没有网址的东西，它完美无缺。当我用图片的真实名称替换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"
- a（常量）URI - url("image.jpg")
- 一个柜台 - counter(section)
- 属性 - attr(id)
- open-quote，close-quote，no-open-quote，no-close-quote

specs不允许它们“嵌套”，它们只能互相跟随，例如：

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

目前的CSS3草案也不允许。可能 - 如果已经讨论过 - 因为大多数用例与演示文稿没什么关系，而与实际内容有关。

Answer 2

自2012年8月28日的W3C候选人建议书开始，有一种语法用于指定attr（）返回的类型。

描述here。

长话短说，以下内容可行：

content: attr(id url);

但它似乎仍然不能与其他字符串连接，这很烦人。

无论如何，这似乎仍未在任何地方实施。

检查Browser compatibility

Css Content，Attr和Url在同一句话中

2 个答案: