欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

深入理解伪元素_html/css_WEB-ITnose

程序员文章站 2022-05-31 14:17:39
...
目录 [1]定义 [2]用法 first-letter first-line before after selection [3]重点 [4]DEMO 首字下沉 钉子效果 图片叠加效果

定义

  伪元素顾名思义伪装成元素,但不是元素,这与生成内容相关。生成内容主要指由浏览器创建的内容,而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现,当然伪元素还包括:first-line,:first-letter和::selection  

用法

:first-letter(IE6-浏览器不支持)

  指定一个元素第一个字母的样式

  [注意1]所有前导标点符号应与第一个字母一同应用该样式

  [注意2]只能与块级元素关联

div:first-letter{color: red;}

:first-line(IE6-浏览器不支持)

  设置元素中第一行文本的样式

  [注意]只能与块级元素关联

div:first-line{color: red;}    

:before(IE7-浏览器不支持)

  在元素内容的最开始插入生成内容

  [注意]默认这个伪元素是行内元素,且继承元素可继承的属性

div:before{content:"前缀"}

:after(IE7-浏览器不支持)

  在元素内容的最后插入生成内容

  [注意]默认这个伪元素是行内元素,且继承元素可继承的属性

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

首字下沉

钉子效果

        

图片叠加效果

深入理解伪元素_html/css_WEB-ITnose
相关标签: 深入理解伪元素