理解伪元素-创新互联
伪元素顾名思义伪装成元素,但不是元素,这与生成内容相关。生成内容主要指由浏览器创建的内容,而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现,当然伪元素还包括:first-line,:first-letter和::selection
创新互联公司是一家专注于成都网站建设、成都做网站与策划设计,石首网站建设哪家好?创新互联公司做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:石首等地区。石首做网站价格咨询:18980820575用法
:first-letter
指定一个元素第一个字母的样式
[注意1]所有前导标点符号应与第一个字母一同应用该样式
[注意2]只能与块级元素关联
[注意3]只有当选择器部分和左大括号之间有空格时,IE6-浏览器才支持。因为first-letter中存在连接符的原因
div:first-letter{color: red;}
:first-line
设置元素中第一行文本的样式
[注意1]只能与块级元素关联
[注意2]只有当选择器部分和左大括号之间有空格时,IE6-浏览器才支持。因为first-line中存在连接符的原因
div:first-line{color: red;}
:before(IE7-浏览器不支持)
在元素内容的最开始插入生成内容
[注意]默认这个伪元素是行内元素,且继承元素可继承的属性;IE7-浏览器中必须声明!DOCTYPE,否则不起作用
div:before{content:"前缀"}
:after(IE7-浏览器不支持)
在元素内容的最后插入生成内容
[注意]默认这个伪元素是行内元素,且继承元素可继承的属性;IE7-浏览器中必须声明!DOCTYPE,否则不起作用
div:after{content:"后缀"}
::selection(IE8-浏览器不支持)
匹配被用户选择的部分
[注意1]firefox浏览器需要添加-moz-前缀
[注意2]只支持双冒号写法
[注意3]只支持颜色和背景颜色两个样式
div::selection{color: red;}
重点
【content属性】
content属性应用于before和after伪元素
content:normal;(默认) content:| |attr( )
【1】
[注意1]如果希望生成内容中有一个换行,则需要使用\A
[注意2]若是一个很长的串,需要它拆分成多行则需要用\对换行符转义
div:before{ content: "第一段\ 第二段";} div:after{ content:"\A后缀"; }
【2】
div:before{ content: url("arrow.gif"); }
【3】attr(
div:before{ content: attr(data-before); }
<补充>【quotes属性】
管理引号
前单引号 -> \2018后单引号 -> \2018前双引号 -> \201C 后双引号 -> \201D
quotes:'201C' '201D' '2018' '2019';//第一个值定义最外层开始引号(open-quote),第二个串定义最外层结束引号(close-quote),第三个值定义次外层开始引号,第四个值定义次外层结束引号,第五个值定义次次外层开始引号,第六个值定义次次外层结束引号……
【4】open-quote|close-quote
最外层次外层最里层
【5】counter
关于counter属性值,详见深入理解CSS计数器
DEMO
首字下沉
图片叠加效果
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
本文名称:理解伪元素-创新互联
分享URL:http://myzitong.com/article/dhjdeh.html