css中的content和attr属性有什么用

小编给大家分享一下css中的content和attr属性有什么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联于2013年成立,先为岐山等服务建站,岐山等地企业,进行企业商务咨询服务。为岐山企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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对页面的很多其他元素和属性进行操作。

以上是“css中的content和attr属性有什么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


本文名称:css中的content和attr属性有什么用
网站路径:http://scyanting.com/article/ghsshj.html

其他资讯