css3中content和attr属性有什么用
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css3中content和attr属性有什么用,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1485字,纯文字阅读大概需要3分钟。
内容图文
![css3中content和attr属性有什么用](/upload/InfoBanner/zyjiaocheng/419/6c93f49233ac4fd987a7ac9058016f28.jpg)
【推荐课程:CSS3教程】
CSS3的出现使得样式表的功能变得越来越强大,同样也使得开发越来越简单便捷。尤其是CSS3中出现的新特性,如transitions, animations, 和 transforms等,这里面有一个特征虽然不是那么抢眼,但却是非常的有用,它就是content和attr表达式,它们能在页面下面悄悄的使用CSS来生成内容,下面让我们看看 attr 和 content 如何相互配合产生神奇效果的。
基本content用法
content属性能让程序员使用CSS往页面元素里填写内容
例:
.myDiv:after { content: "我是一个使用*content*属性生产的静态文字"; }
请注意,如果想让伪元素:after绝对定位,必须对div设置position: relative
content和attr配合使用
如果不想把content内容在CSS里写死,那么可以使用attr表达式来从页面元素中动态的获取内容:
/* <div data-line="1"></div> */ div[data-line]:after { content: attr(data-line); /* 属性名称上不要加引号! */ }
attr属性通常和自定义属性data-配合使用,因为传统的其它属性虽然也能存值,但通常不适合存放表达性文字。
content里的字符串连接操作
这种字符串连接很像常规编程语言:
/* <div data-line="1"></div> */ div[data-line]:after { content: "[line " attr(data-line) "]"; }
在CSS3中就可以完成像JavaScript里的字符串拼接,另外attr的动态生成页面内容也是一件很有用的事。我们可以用它配合content对页面的很多其他元素和属性进行操作。
总结:以上就是本篇文章的全部内容,希望对大家有所帮助。
以上就是css3中content和attr属性有什么用的详细内容。
内容总结
以上是互联网集市为您收集整理的css3中content和attr属性有什么用全部内容,希望文章能够帮你解决css3中content和attr属性有什么用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。