相同点：
伪类和伪元素存在的意义都是为了操作一些通过普通的CSS选择器无法直接取到的节点。它们都相当于CSS选择器的一种扩展。在 CSS2 之前，伪类和伪元素的语法相同。selector.class:pseudo-element {property:value;}不同点
伪类是通过一个抽象的类名（伪类名）捕获不存在的或者普通CSS选择器无法捕获到的信息。伪元素是通过一个抽象的元素名（伪元素名）创建一个原本不存在的抽象元素。开发者可以通过操作这个抽象元素来达到影响其他元素的目的。在 CSS3 中，伪类的语法使用单冒号指定伪类名。selector.class:pseudo-element {property:value;}
伪元素的语法使用双冒号指定伪元素名。selector.class::pseudo-element {property:value;} 常用的伪类（更多请查看官方文档） :link 未访问的节点，通常用于 a 标签:visited 已访问的节点，通常用于 a 标签:hover 鼠标悬浮的节点:active 当前选中的节点:first-child 第一个子节点:last-child 最后一个子节点:enabled 启用的元素，通常用于表单:focus 当前取的焦点的元素:checked 选中的元素，通常用于表单 checkbox 元素:disabled 未启用的元素，通常用于表单 <style> /*未访问的 a 标签*/ a:link { background-color: red; } /*已访问的 a 标签*/ a:visited { background-color: yellow; } /*鼠标悬浮的 a 标签 -- 需放置于 link 和 visited 之后*/ a:hover { background-color: green; } /*当前选中的 a 标签 -- 需要放置于上面三种状态之后*/ a:active { background-color: purple; } /* class 为 demo 的类下的第一个 div 子节点下的第一个 p 节点*/ .demo div:first-child p:first-child { background-color: aqua; color: blue; font-size: 5px; } /* class 为 demo 的类下的第一个 div 子节点下的最后一个 p节点*/ .demo div:first-child p:last-child { color: cornflowerblue; font-size: 30px; }</style><div><a href='#' target="_blank">点击此处超链接1</a> <a href='/demo01' target="_blank">点击此处超链接2</a> <a href='/demo02' target="_blank">点击此处超链接3</a> <a href='/demo03' target="_blank">点击此处超链接4</a></div><hr><div class="demo"> <div> <p>第一个 p 节点</p> <p>第二个 p 节点</p> <p>第三个 p 节点</p> <p>第四个 p 节点</p> </div></div> 常用伪元素 ::before 元素内容前插入新内容::after元素内容之后插入新内容::first-letter 文本首字母。常用于对文本首字母设置样式::first-line 文本首行。常用于对文本首行设置样式。仅用于块级元素。::selection 选中的内容。常用于文本。::placeholder 占位符。用于设置占位符的样式。 <style> p { width: 960px; text-indent: 2em; } /*p 标签第一个字放大*/ p::first-letter { font-size: 40px; } /*p 标签首行变色*/ p::first-line { color: lightcoral; } /*p 标签选中变色*/ p::selection { background-color: #360; } /*p 标签后面追加文本。*/ /*这里可以插入的内容很多：图标icon、文本、css样式 ……*/ p::after { content: 'From 文学网' }</style><div> <p> 有一段青春，留作永恒。剪一段时光，放在最美的段落。好好保存留作永远，时间过去岁月的路过。 只是多了一道曾经，流年一路改变了我们的模样。送走了我们的青春，留给了我们曾经。 这样的夜别样的心情，倒影的年华。深夜想用文字表达我内心的段落，可是终究写不出整个心情。 背着这些流年在岁月里流浪，终究没有安静的场所。来安放我这沉淀的一切，似乎不能放也不能放。 因为只有装进心里，才最为合适。也没有地方比装进心里，更安全。就这样让这段流年，从此埋在心里。 不再提起，让时间的尽头。留作无声的永恒。 </p></div> ::after 和 ::before 的实例
这两个伪元素经常被用来合并组合 CSS 样式。
例如：气泡对话框、Icon 小图标等