微信扫一扫打赏支持

CSS3疑难问题---6、伪类和伪元素的区别

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>

 

 

 

 

 

 
posted @ 2020-02-15 19:23  范仁义  阅读(141)  评论(0)    收藏  举报