1.:first-child 元素所在的父元素的第一个子元素
div:first-child div的父元素的第一个子元素必须是div;否则无效
2. :after 伪元素操作在元素内容之后的内容
<!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>Document</title>
<style>
.container {
font-family: arial, sans-serif;
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
.flex {
background: #6AB6D8;
padding: 10px;
margin-bottom: 50px;
border: 3px solid #2E86BB;
color: white;
font-size: 20px;
text-align: center;
position: relative;
}
.flex:after {
position: absolute;
z-index: 1;
left: 0;
top: 100%;
margin-top: 10px;
100%;
color: #333;
font-size: 18px;
}
.flex6:after {
content: 'fill/-webkit-fill-available/-moz-available';
}
</style>
</head>
<body>
<ul class="container">
<li class="flex flex6">6: flex-basis test</li>
</ul>
</body>
</html>
如上图所示，:after表明在li元素的内容之后添加的伪元素，给伪元素添加内容使用content；
该伪元素可以用在一些需要在元素内容后添加内容的地方！！！！