建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!
当前位置:建站学习网 > DIV+CSS教程 > DIV CSS教程 >

在CSS中用attr()显示HTML属性值

整理编辑:建站学习网 更新时间:2017-01-08 阅读:0

   attr()功能早在CSS 2.1标准中就已经出现,但现在才开始普遍流行。它提供了一个巧妙的方法在CSS中使用HTML标签上的属性,在很多情况下都能帮你省去了以往需要Javascript处理的过程。

  要想使用这个功能,你需要用到三种元素:一个:before 或 :after CSS伪类样式, .content属性,和一个带有你想使用的HTML属性名称的attr()表达式。例如,想去显示

  标题上的data-prefix属性的值,你可以写成这样:

  h3:before {

  content: attr(data-prefix) "";

  }

  This is a heading

  显然,这个例子并没有展示它有多大用处,只是展示了它的基本用法。让我们来试一个更有用的例子,attr()的一个极好的应用就是当用户打印页面时将页面链接显示出来。为了实现这个,你可以这样写:

  @media print {

  a:after {

  content: " (link to " attr(href) ") ";

  }

  }

  Visit our home page

  一旦你知道了这个技巧,你就会吃惊于很多时候它能给你的工作带来的方便!

转载请注明出处:https://www.dedexuexi.com/divcss/jc/2324.html

关键词:技巧