css伪类 first-child 和 nth-last-child 实现确定子元素个数

css 伪类来确定子元素个数 实现不同个数的不同展示效果

1. element:first-child:nth-last-child(2) 有两个子元素 即第一个元素也是倒数第二个元素
2. element:first-child:nth-last-child(n) 有n个子元素
3. father:has(son:nth-last-child(n):first-child) son 统一设置
   例子：微信朋友圈上传图片展示效果纯css 完成

h2,p,ul,li{
   
  padding:0;
  margin:0;
}
/* 标签样式 */
ul,li{
   
  list-style: none;
}
/* 页面样式 */
.vessel{
   
  width:400px;
  /* 高度有内容决定 因为图片数量不确定 */
  height: fit-content;
  border:1px solid blue;
  /* 左右两栏布局 */
  display: flex;
  flex-flow: row nowrap;
  background-color: #000;
  margin:auto;
}
.left_box{
   
  width:80px;
  height:100%;
  img{
   
    /* 图片的大小设置*/
    width:60px;
    height:60px;
    /* 等比例缩放图片居中 */
    object-fit:cover;
    object-position: center;
    /* 去除底部留白 */
    vertical-align: middle;
    /* 圆形边框 */
    border-radius: 8px ;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    /* 在右边显示  auto起作用需块级元素 */
    display: block;
    margin:10px 5px 0px auto;
  }</