伪类，伪元素和文字省略操做

时间 2019-11-18

标签元素文字省略繁體版

原文原文链接

1.伪类

伪类其实是元素的某种状态。css

元素：hover:鼠标悬浮上去的状态html

A:link:连接未点击时候的状态字体

A:visited：连接被浏览过的状态spa

A:active：连接被点击时候的状态code

Input:focus 输入框聚焦时候的状态，即有光标的状态。htm

2.伪元素

伪元素便是假的元素，经过元素内部创造假的元素，能够创造2中假的元素，1个是在元素内部的最前面，一个是在内部的最后面blog

元素：before,在元素内部的前面建立一个假的子元素ip

元素：after，在元素内部的后面建立一个假的子元素it

注：无论有没有元素都要写（没有元素时——content:""）io

 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;（...——>意为后面多余文字省略）