伪元素解析

伪元素解析

一、什么是伪元素:一说到伪元素我们都会想到伪类，伪元素与伪类是不一样的，伪元素是不存在的元素（伪类的操作对象是文档树中已有的元素.而伪元素则创建了一个文档树外的元素.使用css创建的标签因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。）

   1、伪元素分别有:`（文本类型）
    ::first-letter，段落首行首字的样式。
    ::first-line，文本首行自适应样式。
    ::selection，文本被选中时的状态。
   2、伪元素类别:(插入类型类 行内元素（重要）)
    ::before,在元素内部最前面插入内容
    ::after,在元素内部最后面插入内容
    总结：这两个类型可以插入文本也可以插入相关块级元素的样
    式，背景，宽高，字体大小都可以设置，相当于在元素内部嵌入
    了一个块级盒子，同样也支持浮动，定位，显示类display，
    1.默认display: inline；
    2.必须设置content属性，否则一切都是无用功；
    3.默认user-select: none，就是::before和::after的内容无法被用户选中的；
    4.伪元素和伪类结合使用形如：.target:hover::after。

注意!:创建以后与元素本体是父子关系，伪元素与伪类的区别:

    伪元素:伪元素是凭空产生的元素，看得见摸不着，使用双冒号
    表示
    伪类:伪类描述的是一个元素的状态，使用单冒号表示。