Css li:n-child（）颜色格式的菜单

我有一份包含ul li产品的菜单。我有五个项目，使用flexbox将它们与最后一个项目对齐，使用

marginleft:auto将其向右推

我还使用transform:skewX（45度）为每个
li:：before
和
li:：after
创建箭头，并且我有一个起始背景色。箭头边框设置为黄色

我的问题是，我想单独设置每个li项目的颜色，但最后一个li除外

因此，我想使用li:nt子属性并设置背景色，同时考虑前后值

我猜我还需要使用z-索引，这样之前的前后颜色值就可以以适当的方式处理了

这是我的html代码：

<nav class="flex-nav" id="nav">
    <ul>
      <li><a href="./index.pug">Home page</a></li>
      <li><a href="./test.pug">Test page</a></li>
      <li><a href="./test.pug">Link1</a></li>
      <li><a href="./test.pug">Link2</a></li>
      <li><a href="./test.pug">Login</a></li>
    </ul>
  </nav>

谢谢：）
请尝试在CSS下方更改第一、第二和第三项的背景色。谢谢


.flex导航ul{
显示器：flex；
列表样式类型：无；
左侧填充：0；
空白：nowrap；
}
.flex nav ul li{
证明内容：之间的空间；
对齐项目：居中；
不透明度：1.0；
过渡：不透明度。2缓进缓出；
位置：相对位置；
线高：26px；
利润率：0.9px 0-10px；
填充：0 20px；
}
.flex nav li:之前，
.flex nav li:之后{
右边框：4px纯黄色；
内容：''；
显示：块；
身高：50%；
位置：绝对位置；
左：0；
右：0；
排名：0；
z指数：-1；
变换：skewX（45度）；
}
.flex nav li:第一个孩子：：之前，
.flex nav li:第一个孩子：：之后{
背景色：红色；
}
.flex nav li:第n个孩子（2）：：之前，
.flex nav li:第n个孩子（2）：：之后{
背景颜色：绿色；
}
.flex nav li:第n个孩子（3）：：之前，
.flex-nav-li:第n个孩子（3）：：之后{
背景颜色：蓝色；
}








那么你真正的问题是什么？我的aciua？？对不起，我不明白你的意思。请刷新页面并重新阅读…我想将各个li项目设置为不同的颜色。到目前为止，你尝试了什么。。。什么不起作用。。。或者你是在请这里的人为你写一些代码？请以后使用StackOverflow提供的代码片段
来创建你的答案。再次感谢，我昨天试图将其标记为正确，但它不允许我，因为时间不够：）我还有一个关于第n个问题：子元素和伪元素，我可以直接问你吗？@hassan siddiqui我在找聊天功能，有没有办法直接与你联系？如果你在线，我们可以再聊天吗？：）
.flex-nav ul {
    display: flex;
    list-style-type: none;
    padding-left: 0;
    white-space: nowrap;
}

.flex-nav ul li {
    justify-content: space-between;
    align-items: center;
    opacity: 1.0;
    transition: opacity .2s ease-in-out;
    position: relative;
    line-height: 26px;
    margin: 0 9px 0 -10px;
    padding: 0 20px;
}

ul li::before,
ul li::after {
    border-right: 4px solid yellow;
    content: '';
    display: block;
    height: 50%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
    transform: skewX(45deg);
    background-color: #b0e0e6;
}




ul li::after {
    bottom: 0;
    top: auto;
    transform: skewX(-45deg);
}

ul li:last-of-type::before,
ul li:last-of-type::after {
    display: none;
}

ul li a {
    font: bold 18px Sans-Serif;
    letter-spacing: -1px;
    text-decoration: none;

}

ul>li:hover {
    opacity: 1.0;
}

ul:hover>li:not(:hover) {
    opacity: 0.5;
}


.flex-nav ul li:last-child {
    margin-left: auto;
}