CSS3疑难问题---6、伪类和伪元素的区别
一、总结
一句话总结：
伪类不产生新的对象，只是在 DOM 中一个元素的不同状态
伪元素产生新对象，在 DOM 树中看不到
二、伪类和伪元素的区别
博客对应课程的视频位置：6、伪类和伪元素的区别
https://www.fanrenyi.com/video/13/84
伪类不产生新的对象，只是在 DOM 中一个元素的不同状态
伪元素产生新对象，在 DOM 树中看不到
三、课程代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>伪类和伪元素的区别</title> 6 <style> 7 /* 8 伪类不产生新的对象，只是在 DOM 中一个元素的不同状态 9 伪元素产生新对象，在 DOM 树中看不到 10 */ 11 12 /* 13 伪类选择器本身就是一种状态， 14 :hover就是表示鼠标悬浮到元素上面时候的那种状态 15 :active就是表示鼠标点击到元素上面去的时候的那一种状态 16 */ 17 a:hover{ 18 color: orange; 19 } 20 a:active{ 21 background-color: red; 22 } 23 /* 24 伪元素选择器表示的是会产生元素，但是不是真的标签，所以叫伪元素 25 */ 26 p::before{ 27 content: '这是p:before---'; 28 color: blue; 29 } 30 </style> 31 </head> 32 <body> 33 <a href="">a标签</a> 34 <p>p标签</p> 35 </body> 36 </html>