1.伪类
伪类实际上是元素的某种状态。
元素：hover:鼠标悬浮上去的状态
A:link:链接未点击时候的状态
A:visited：链接被浏览过的状态
A:active：链接被点击时候的状态
Input:focus 输入框聚焦时候的状态，即有光标的状态。
2.伪元素
伪元素即是假的元素，通过元素内部创造假的元素，可以创造2中假的元素，1个是在元素内部的最前面，一个是在内部的最后面
元素：before,在元素内部的前面创建一个假的子元素
元素：after，在元素内部的后面创建一个假的子元素
注：不管有没有元素都要写（没有元素时——content:""）
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 7 <meta charset="UTF-8"> 8 9 <title></title> 10 11 12 13 <style type="text/css"> 14 15 .d1:before{ 16 17 content: "0";//不管有没有元素都要写（没有元素时——content:""） 18 19 display: block; 20 21 width: 100px; 22 23 height: 100px; 24 25 background: skyblue; 26 27 } 28 29 30 31 .d1:after{ 32 33 content: "4"; 34 35 display: block; 36 37 width: 100px; 38 39 height: 100px; 40 41 background: skyblue; 42 43 } 44 45 </style> 46 47 </head> 48 49 <body> 50 51 <!--伪元素before--> 52 53 <div class="d1"> 54 55 <div class="child">1</div> 56 57 <div class="child">2</div> 58 59 <div class="child">3</div> 60 61 </div> 62 63 </body> 64 65 </html>
聊天框案例：
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 7 <meta charset="UTF-8"> 8 9 <title></title> 10 11 <style type="text/css"> 12 13 .main{ 14 15 width: 800px; 16 17 margin: 0 auto; 18 19 } 20 21 .ltk{ 22 23 width:600px ; 24 25 height: 80px; 26 27 background: skyblue; 28 29 color:#fff; 30 31 line-height: 80px; 32 33 padding: 0 20px; 34 35 margin: 10px auto; 36 37 border-radius: 20px; 38 39 position: relative; 40 41 } 42 43 44 45 .ltk:before{ 46 47 /*content必须要写*/ 48 49 content: ""; 50 51 display: block; 52 53 width: 0; 54 55 height: 0; 56 57 border-top:10px solid transparent ; 58 59 border-left:15px solid transparent ; 60 61 border-right:15px solid skyblue ; 62 63 border-bottom:10px solid transparent ; 64 65 position: absolute; 66 67 68 69 left: -30px; 70 71 top: 20px; 72 73 } 74 75 </style> 76 77 </head> 78 79 <body> 80 81 <div class="main"> 82 83 <div class="ltk"> 84 85 今晚看电影？ 86 87 </div> 88 89 90 91 <div class="ltk"> 92 93 记得带身份证？ 94 95 </div> 96 97 </div> 98 99 </body> 100 101 </html>
3.当字体超出容器时操作
3步：
/*溢出隐藏*/
overflow: hidden;
/*不换行*/
white-space: nowrap;
/*文字超出之后显示的样式*/
text-overflow: ellipsis;（...——>意为后面多余文字省略）