同一句中的Css Content，Attr和Url [英] Css Content, Attr and Url in the same sentence

问题描述

我已经使用了内容属性很长时间，今天我想尝试一些新的东西。

所以我试过：

  .TableLine：hover：after {
 content：url（../ Img / Photo /attr（id）。jpg） ; 
} 
  

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

它根本不工作，它没有效果。我认为该块没有解析，因为添加一个边框或背景的块也似乎没有效果。

当我只是使用 attr（id）单独，没有url的东西，它的工作完美。当我用图片的真实名称替换 attr（id）时，它也可以工作。

在网上我没有找到任何相关的，所以在这里我是。这是一个已知的错误还是只是我的错误？ ：）

解决方案

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

  content：normal |无| 
 [< string> | < uri> | < counter> | attr（）| 
 open-quote |关闭报价| no-open-quote |无关闭报价] + |继承
  

Ie：

• 文字正常，无或继承

：
b



• 一个字符串 - hello


• - url（image.jpg）


• 计数器 - 计数器$ c>


• 属性 - attr（id）


• open-quote ， close-quote ， no-open-quote ， no-close-quote





规范不允许将其嵌套，他们只能相互跟随，例如：

 内容：照片：url（../ Img / Photo.jpg ）attr（id）; 
 / *这不是你想要的* / 
  

目前的CSS3草稿也允许它。可能 - 如果已经讨论过了 - 因为大多数用例与演示文稿无关，更多与实际内容有关。

I have used the content attribute for a long time, and today I wanted to try something new. Instead of using JS to display a image tooltip I wanted to know if it was possible to do it dynamically with CSS.

So I tried:

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

where attr(id) is supposed to return the ID of the picture (alphanumeric) which is also the name of the picture.

It doesn't work at all, it has no effect. I think that the block did not parse because adding a border or background to the block also seems to have no effect.

When I just use the attr(id) alone, without the url thing, it works perfectly. It also works when I replace attr(id) with the real name of the picture.

After searching a while on the web I haven't found anything relevant so here I am. Is that a known bug or just my mistake? :)

解决方案

It's neither a bug nor a mistake. The currently supported syntax (CSS2.1) for content is:

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

I.e.:

• The literal normal, none or inherit

• Or any number of these in succession:

  • a string - "hello"
  • a (constant) URI - url("image.jpg")
  • a counter - counter(section)
  • an attribute - attr(id)
  • open-quote, close-quote, no-open-quote, no-close-quote

The specs don't allow for them to be "nested", they can only follow each other, e.g.:

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

The current CSS3 drafts don't allow for it either. Possibly - if it's been discussed - because most use cases would have little to do with presentation and more to do with actual content.

这篇关于同一句中的Css Content，Attr和Url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！