13518219792
这篇文章将为大家详细讲解有关css3中content和attr属性的作用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
10年的湄潭网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同，自动调整湄潭建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联建站从事“湄潭网站设计”,“湄潭网站推广”以来，每个客户项目都认真落实执行。
CSS3中的content属性可以通过CSS在页面元素中填写内容，还可以实现字符串连接操作；content和attr配合使用可以从元素中动态的获取内容
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]:after {
content: attr(data-line);
/* 属性名称上不要加引号！ */ }attr属性通常和自定义属性data-配合使用，因为传统的其它属性虽然也能存值，但通常不适合存放表达性文字。
content里的字符串连接操作
这种字符串连接很像常规编程语言：
/* */
div[data-line]:after
{ content: "[line " attr(data-line) "]"; }在CSS3中就可以完成像JavaScript里的字符串拼接，另外attr的动态生成页面内容也是一件很有用的事。我们可以用它配合content对页面的很多其他元素和属性进行操作。
关于css3中content和attr属性的作用就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
