深入理解CSS伪元素

定义

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

用法

: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;}

速查表

下面是伪元素的速查表

/* Typographic Pseudo-elements */
::first-line            /* 选取文字块首行字符 */
::first-letter          /* 选取文字块首行首个字符 */

/* Highlight Pseudo-elements */
::selection             /* 选取文档中高亮(反白)的部分*/
::inactive-selection    /* 选取非活动状态时文档中高亮(反白)的部分*/
::spelling-error        /* 选取被 UA 标记为拼写错误的文本 */
::grammar-error         /* 选取被 UA 标记为语法错误的文本 */

/* Tree-Abiding Pseudo-elements */
::before                /* 在选中元素中创建一个前置的子节点 */
::after                 /* 在选中元素中创建一个后置的子节点 */
::marker                /* 选取列表自动生成的项目标记符号 */
::placeholder           /* 选取字段的占位符文本(提示信息) */

/* WebVTT Format */
::cue                   /* 匹配所选元素中 WebVTT 提示 */

/* Fullscreen API */
::backdrop              /* 匹配全屏模式下的背景 */

重点

【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

DEMO

首字下沉

钉子效果

图片叠加效果

一个不是计算机专业的理科生，转行学前端

如果你也有一个编程梦，这是咱们的前端学习QQ群：784-783-012

（在线学习，8个月时间，目前就业，广州工作，月薪16k）