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

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

 

posted @ 2019-05-27 23:25  他也就火三年  阅读(346)  评论(0)  编辑  收藏  举报