伪类
伪类实际上是元素的某种状态。
元素：hover:鼠标悬浮上去的状态
A:link:链接未点击时候的状态
A:visited：链接被浏览过的状态
A:active：链接被点击时候的状态
Input:focus 输入框聚焦时候的状态，即有光标的状态。
伪元素
伪元素即是假的元素，通过元素内部创造假的元素，可以创造2中假的元素，1个是在元素内部的最前面，一个是在内部的最后面
元素：before,在元素内部的前面创建一个假的子元素
元素：after，在元素内部的后面创建一个假的子元素
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style type="text/css"> 8 .d1:before{ 9 content: "0"; 10 display: block; 11 width: 100px; 12 height: 100px; 13 background: skyblue; 14 } 15 16 .d1:after{ 17 content: "4"; 18 display: block; 19 width: 100px; 20 height: 100px; 21 background: skyblue; 22 } 23 </style> 24 </head> 25 <body> 26 <!--伪元素before--> 27 <div class="d1"> 28 <div class="child">1</div> 29 <div class="child">2</div> 30 <div class="child">3</div> 31 </div> 32 </body> 33 </html>
聊天框案例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .main{ 8 width: 800px; 9 margin: 0 auto; 10 } 11 .ltk{ 12 width:600px ; 13 height: 80px; 14 background: skyblue; 15 color:#fff; 16 line-height: 80px; 17 padding: 0 20px; 18 margin: 10px auto; 19 border-radius: 20px; 20 position: relative; 21 } 22 23 .ltk:before{ 24 /*content必须要写*/ 25 content: ""; 26 display: block; 27 width: 0; 28 height: 0; 29 border-top:10px solid transparent ; 30 border-left:15px solid transparent ; 31 border-right:15px solid skyblue ; 32 border-bottom:10px solid transparent ; 33 position: absolute; 34 35 left: -30px; 36 top: 20px; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="main"> 42 <div class="ltk"> 43 今晚看电影？ 44 </div> 45 46 <div class="ltk"> 47 记得带身份证？ 48 </div> 49 </div> 50 </body> 51 </html>