CSS3 属性值中的 Content 和 Attr 的用法介绍

2022-12-30 0 805

CSS3的再次出现使JSP的机能显得愈来愈强悍,而某种程度上也能说它让他们合作开发出来愈来愈难了。CSS3里尽管有许多新锐的新特点再次出现,比如 transitions、animations 和 transforms,但有两个特点尽管并非所以亮眼,但看似十分的管用,它是 content 和 attr 函数,它能在你的网页上面悄悄地采用 CSS 来聚合文本,上面让他们看一看 attr 和 content 怎样相互互相配合造成奇妙效用的。

CSS3 属性值中的 Content 和 Attr 的用法介绍

基本上 Content 用语

content 特操控性让合作开发人员采用CSS往网页原素里填写文本:

myDiv:after { content:”我是两个采用*content*属性制造的动态文本”;}

请注意,假如想让伪原素:after 当然机能定位,你要对你的 div 增设 position: relative。

Content 和 Attr 互相配合采用

假如你不该把 content

/*

*/div[data-line]:after { content: attr(data-line);/*特性中文名称上千万别加标点符号!*/}

attr 特性一般来说和自订特性 data-互相配合采用,即使现代的其他特性尽管也能存值,但一般来说不适宜放置抒发性文本。

Content 数组相连操作方式

此种数组相连很像常规性C语言了:

/*

*/div[data-line]:after{ content:”[line ” attr(data-line)”]”;}

还须要用 JavaScript 里合叶数组吗?CSS3里就能顺利完成那些,呢感觉 CSS3能部份的代替 Javascript 了! attr 的动态聚合网页文本的能力着实是一件让人兴奋的事情。你实际上能用它互相配合 content 对网页的许多其他原素和特性进行操作方式。

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务