·您当前的位置:主页 > 技术教程 > Html5技术 >

[html5]CSS3中content和attr示例使用方法

时间:2017-09-04 17:59酷播
[html5]CSS3中content和attr示例使用方法

CSS3的出现使得样式表的功能变得越来越强大,而某种意义上也可以说它让我们开发起来越来越容易了。CSS3里虽然有很多重量级的新特征出现——例如transitions, animations, 和 transforms,但有一个特征虽然不是那么抢眼,但却是非常的有用,它就是contentattr表达式,它们能在你的页面下面悄悄的使用CSS来生成内容,下面让我们看看 attrcontent 如何相互配合产生神奇效果的。

基本content用法

content属性能让程序员使用CSS往页面元素里填写内容:

.myDiv:after { content: "我是一个使用*content*属性生产的静态文字";  }

请注意,如果想让伪元素:after绝对定位,你必须对你的div设置position: relative

contentattr 配合使用

如果你不想把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) "]";  }

还需要用JavaScript里拼装字符串吗?CSS3里就能完成这些,是不是感觉CSS3可以部分的替代Javascript了! attr的动态生成页面内容的能力着实是一件让人兴奋的事情。你实际上可以用它配合content对页面的很多其他元素和属性进行操作。

微信付费直播
酷播云免费在线视频整体解决方案
进入开学季,保利威视推出云视频优惠,云视频套餐、流量超实惠大放“价”就是现在,还可以免费获取GET2017教育科技大会VIP门票哦!