在 CSS3 中，规定了伪类用单冒号 (:)表示，伪元素用双冒号表示 (::)，对于css3之前已经存在的伪元素，也是支持单冒号的，但我们在开发过程中还是要尽量规范写法。
【区别】伪类：当我们希望样式在某些特定状态下才被呈现到指定的元素时，换句话说就是，当某个元素状态改变时，我们期待给这个元素添加一些特殊效果，那么我们就可以往元素的选择器后面加上对应的伪类。比如: hover就能够指定当我们悬浮在某元素上时，期望该元素要显示的样式。
伪元素：则是创建了一些不在文档树中的元素，并为其添加样式，需要注意的是伪元素样式里必须要给它一个content属性。比如可以通过::before伪元素在个元素前增加一些文本，并为这些文本添加样式。这些文本实际上不在文档树中的，所以叫伪元素。
总结来看，伪类的操作对象是文档树中已有的元素，而伪元素则是创建文档树以外的元素并为其添加样式。所以二者最核心区别就在于，是否创造了“新的元素”。
<template> <div> <div class=”div1″>第一个字符是红色。</div> <div class=”div2″>选择部分背景是黑色哟。</div> <div class=”div3″>该内容前面插入内容123。</div>链接被访问后是红色，悬浮是绿色。<div> <p>第一个p元素会是黄色</p> <p>第一个p元素会是黄色</p> </div> </div></template><style scoped>/*单冒号(是伪类，双冒号《::》是伪元素*/.div1::first-letter{ color: red;}.div2::selection{ background-color: black;}.div3::before{ content:’123′;}a:visited { color: red;}a:hover{ color: limegreen;}p:first-child { color:yellow;}<style>