伪类和伪元素的区别

伪元素

伪元素：在逻辑上创建了虚拟的新元素，并可以给新元素添加样式。

伪类

伪类：根据状态改变元素样式，只是对选择器的扩展和弥补不足。

区别：

1.伪类使用单冒号，CSS3在伪元素中引入双冒号，是为了区分伪类和伪元素，伪元素同时也支持单冒号。为了方便区分，可以给伪元素一直使用双冒号。

2.一个选择器中可以同时跟随多个伪类并一起起作用，但伪元素如果在选择器后跟随多个则不会起作用。

常见的伪元素

伪元素	描述
::after	作为选中元素的第一个子元素。
::before	作为选中元素的最后一个子元素。
::first-letter	选中块元素第一行的第一个字母，应用样式。
::first-line	选中块元素的第一行，应用样式。
::selection	应用于文档中被用户选中的部分，如使用鼠标选中文本。
::file-selector-button	代表input(file)标签按钮，用来改变该按钮样式。
::marker	应用于list-item元素上的标记点的样式。
::slotted	用于选定那些被放在HTML模板中的元素。
::part	应用于Web components中shadow-dom的任何匹配part属性的元素。

常见的伪元素演示： 记住： content要和::before,::after一起记忆 ::before 创建一个伪元素，作为所选中元素的第一个子元素；::after 创建一个伪元素，作为所选中元素的最后一个子元素。 before和after通常需要content在前后添加内容 content的取值范围：

值	说明	实例
none	设置 content 为空值。
normal	在 :before 和 :after 伪类元素中会被视为 none，即也是空值。
counter	设定计数器，格式可以是 counter(name) 或 counter(name,style) 。产生的内容是该伪类元素指定名称的最小范围的计数；格式由style指定（默认是'decimal'——十进制数字）
attr (attribute)	将元素的 attribute 属性以字符串形式返回。。
string	设置文本内容	content:"中国"
open-quote	设置前引号	content: open-quote
close-quote	设置后引号	content: close-quote
no-open-quote	移除内容的开始引号
no-close-quote	移除内容的闭合引号
url(url)	设置某种媒体（图像，声音，视频等内容）的链接地址	content: url("./")
inherit	指定的 content 属性的值，应该从父元素继承

        .wrap::before{
            content: "开始";
            color: #f00;


        }
        label::before{
            content: open-quote;
            color:#f00
        }
        label::after{
            content: close-quote;
            color:#f00
        }
        
        input{
            border: 1px solid green;
        }
        input::placeholder{
            color: red;
            font-size: medium;
            font-style: italic;
        }
        ::selection{
            color: cyan        }
    </style> ```