今天周六，但是由于手头的工作不太紧，所以就提前了今天自我学习时间。昨天理解的知识点有个错误，就是关于伪类这块儿的。比如说 link, visitied, active,hover是结构伪类选择器，而今天我学习的才是伪类元素。好，废话不多说，开始我今天的学习分享文章啦~也是自我学习的一个总结！
知识点
1.关于伪类元素：我是从一小段文字着手的，里面涉及的有：first-letter和：first-line
下面是我做出来的效果图张贴：
这里面我是用::first-letter将文章的第一个字进行如图设置，::first-line设置了文章第一行。然后用float:left将第一个设置下沉操作。
上代码：
2.border-radius属性
border-radius属性我理解的就是制作那些有弧度的图形的
border-radius:上 右 下 左
这个我是通过制作整圆，半圆来熟悉了解的
上代码：
3.通过border绘制三角形，聊天界面对话框
绘制三角形只要是先设置宽高为0px，需要什么朝向的三角形，就把对立方向设置为0px 其他对立的颜色设置为透明（transparent）
上代码：
关于聊天对话框的绘制：主要分为两部分：圆角矩形+朝左小三角，小三角是通过伪元素模拟出来的
设置完两部分的图案，记得设置元素定位，元素相对定位，伪元素绝对定位
上代码：
效果图：
4.绘制菱形和平行四边形
不管是菱形还是平行四边形，都是通过变形得来的
菱形就是正方形旋转45度
所以首先就是绘制一个正方形，然后tranform：rotate（45deg）
平行四边形就是偏移，通过tranform:slew(x,y)
上代码：
以上就是今天学习的css内容啦~~~下面是对昨天伪类选择器的补充
这里要注意first-child和first-of-type
不同元素还是要分开处理的
上自己的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>结构伪类选择器2</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.seletor{
width: 500px;
height: 300px;
border: 1px solid grey
}
.seletor ul{
margin: 30px auto;
float: left;
width:500px;
height: 20px;
border: 1px solid black
}
.seletor ul p{
width: 20px;
height: 20px;
border: 1px solid blueviolet;
display: inline-block
}
.seletor li{
width:20px;
height:20px;
border: 1px solid blueviolet;
list-style: none;
float: left;
margin:auto 10px;
text-align: center;
}
/* 父元素的第一个子元素 */
.seletor li:first-child{
background-color: brown
}
/* 父元素的最后一个子元素 */
/* .seletor li:last-child{
background-color: brown
} */
/* 奇数元素 */
/* .seletor li:nth-child(odd){
background-color: brown
} */
/* 奇数元素 */
/* .seletor li:nth-child(even){
background-color: brown
} */
/* 只有一个子元素 */
/* .seletor li:only-child{
background-color: brown
} */
/* 同级元素的第一个元素 */
/* .seletor li:first-of-type{
background-color: brown
} */
/* 同级元素的最后元素 */
/* .seletor li:last-of-type{
background-color: brown
} */
.all{
width: 500px;
height: 300px;
border: 1px solid grey
}
.all p{
display: inline-block;
width: 20px;
height: 20px;
border:1px solid red;
margin: auto 10px;
text-align: center
}
.all span:first-child{
background-color: aqua
}
.all span{
display: inline-block;
width: 20px;
height: 20px;
border:1px solid red;
text-align: center
}
</style>
</head>
<body>
<div class="seletor">
<ul>
<li><a href="">a</a></li>
<li><a href="">b</a></li>
<li><a href="">c</a></li>
<li><a href="">d</a></li>
<li><a href="">e</a></li>
<li><a href="">f</a></li>
<li><a href="">g</a></li>
<li><a href="">h</a></li>
<li><a href="">h</a></li>
<li><a href="">j</a></li>
</ul>
<div class="all">
<span>1</span>
<span>1</span>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
<!-- <ul>
<li><a href="">k</a></li>
</ul> -->
</div>
</body>
</html>
