伪类
伪类实际上是元素的某种状态。
元素：hover:鼠标悬浮上去的状态
A:link:链接未点击时候的状态
A:visited：链接被浏览过的状态
A:active：链接被点击时候的状态
Input:focus 输入框聚焦时候的状态，即有光标的状态。
伪元素
伪元素即是假的元素，通过元素内部创造假的元素，可以创造2中假的元素，1个是在元素内部的最前面，一个是在内部的最后面
元素：before,在元素内部的前面创建一个假的子元素
元素：after，在元素内部的后面创建一个假的子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.d1:before{
content: "0";
display: block;
width: 100px;
height: 100px;
background: skyblue;
}
.d1:after{
content: "4";
display: block;
width: 100px;
height: 100px;
background: skyblue;
}
</style>
</head>
<body>
<!--伪元素before-->
<div class="d1">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
</body>
</html>聊天框案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.main{
width: 800px;
margin: 0 auto;
}
.ltk{
width:600px ;
height: 80px;
background: skyblue;
color:#fff;
line-height: 80px;
padding: 0 20px;
margin: 10px auto;
border-radius: 20px;
position: relative;
}
.ltk:before{
/*content必须要写*/
content: "";
display: block;
width: 0;
height: 0;
border-top:10px solid transparent ;
border-left:15px solid transparent ;
border-right:15px solid skyblue ;
border-bottom:10px solid transparent ;
position: absolute;
left: -30px;
top: 20px;
}
</style>
</head>
<body>
<div class="main">
<div class="ltk">
今晚看电影？
</div>
<div class="ltk">
记得带身份证？
</div>
</div>
</body>
</html>
828
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
