这篇文章主要介绍在CSS中如何使用attr()显示HTML属性值,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
在CSS中用attr()显示HTML属性值
attr()功能早在CSS 2.1标准中就已经出现,但现在才开始普遍流行。它提供了一个巧妙的方法在CSS中使用HTML标签上的属性,在很多情况下都能帮你省去了以往需要Javascript处理的过程。
要想使用这个功能,你需要用到三种元素:一个:before 或 :after CSS伪类样式, .content属性,和一个带有你想使用的HTML属性名称的attr()表达式。例如,想去显示<h4>标题上的data-prefix属性的值,你可以写成这样:
h3:before { content: attr(data-prefix) " "; } <h4 data-prefix="Custom prefix">This is a heading</h4> 显然,这个例子并没有展示它有多大用处,只是展示了它的基本用法。让我们来试一个更有用的例子,attr()的一个极好的应用就是当用户打印页面时将页面链接显示出来。为了实现这个,你可以这样写: CSS Code复制内容到剪贴板 @media print { a:after { content: " (link to " attr(href) ") "; } } <a href="http://example.com">Visit our home page</a>
一旦你知道了这个技巧,你就会吃惊于很多时候它能给你的工作带来的方便!
提示:在新版的CSS3标准中,attr()功能被扩展,可以用在各种CSS标记中。
以上是“在CSS中如何使用attr()显示HTML属性值”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。