提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > css3中content和attr属性有什么用【css教程】,content、attr

CSS3中的content属性能够经由过程CSS在页面元素中填写内容,还能够完成字符串衔接操纵;content和attr合营运用能够从元素中动态的猎取内容

【引荐课程: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属性有什么用的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"css3中content和attr属性有什么用【css教程】,content、attr"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线