使用循环生成数据同时用弹性盒模型布局，去除最后一个的边框

如题：
布局是使用map循环数据生成的，同时用弹性盒模型布局，最后一个块的右边框需要去除，方法如下：

:nth-last-of-type() 选择器

含义和使用：

:nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。

n 可以是一个数字，一个关键字，或者一个公式

放在我这个代码里就是这样写的：选择它的倒数第一个，设置边框为none.

 .list-con: nth-last-of-type(1) {
        border-right: none;
    }

感兴趣的可以试试，懒得试的可以直接看下代码就OK了。

import styled from 'styled-components'

const AccountBox = styled.div`
   .content-list {
       width: 1210px;
       height: 110px;
       background-color: ${({ theme }) => theme.dark.activeFontColor};
       display: inline-block;
       display: flex;
       flex-direction: row;
       justify-content: space-around;
       align-items: flex-start;
       flex-wrap: wrap;
       align-content: flex-start;
       margin-bottom: 20px;
   }
   .list-con {
       width: 124px;
       height: 60px;
       border-right: 1px solid #d3d9e1;
       // 下面只是抽离的公共颜色，跟本问题无关，无需关注
       background-color: ${({ theme }) => theme.dark.activeFontColor};
       margin: 24px 0 0 38px;
   }

   // 重点是这个，这个语句就是去除最右边边框的
   .list-con: nth-last-of-type(1) {
       border-right: none;
   }

`
export default class Account extends React.Component {
   constructor(props) {
       super(props)
       this.state = {
           listArr: [
               { title: '姓名', name: '阿呆' },
               { title: '性别', name: '男' },
               { title: '年龄段', name: '20-30' },
               { title: '国籍', name: '中国' },
               { title: '教育程度', name: '本科' },
               { title: '月收入水平', name: '10000-12000' },
           ]
       }
   }
   render() {
       return (
          <AccountBox className={`basice-content`}>
             <div className={`content-list`}>
                {this.state.listArr.map((item, index) => {
                    return (
                       <div className={`list-con`} key={index}>
                          <p className={`list-title`}>{item.title}</p>
                          <p className={`list-content`}>{item.name}</p>
                        </div>
                      )
                  })}
                </div>
             </AccountBox>
       ）
   }

这个方法同样可以使用于其他需要类似操作的标签和属性，可达到同样的效果。