旗下导航:搜·么
当前位置:网站首页 > CSS > 正文

css3中content和attr属性有什么用【css教程】

作者:搜搜PHP网发布时间:2019-11-26分类:CSS浏览:83


导读:CSS3中的content属性能够经由过程CSS在页面元素中填写内容,还能够完成字符串衔接操纵;content和attr合营运用能够从元素中动态的猎取内容【引荐课程:C...
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网别的相干文章!

标签:contentattr