li：nth-​​child（）颜色格式的菜单

Question

我有一个包含所有项目的菜单。我有五个项目，使用flexbox将它们与最后一个项目对齐，并使用margin-left:auto;将其推到右侧。

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

我的问题是，我想为每个li项目（最后一个li除外）分别设置颜色。

因此，我想使用li：nt-child属性并设置背景色，还要考虑之前和之后的值。

我猜我可能还需要使用z-index，以便以适当的方式处理之前和之后的颜色值。

这是我的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-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;
}

谢谢：）

Answer 1

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

.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;
}

.flex-nav li:before,
.flex-nav 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);
}

.flex-nav li:first-child::before,
.flex-nav li:first-child::after {
  background-color: red;
}

.flex-nav li:nth-child(2)::before,
.flex-nav li:nth-child(2)::after {
  background-color: green;
}

.flex-nav li:nth-child(3)::before,
.flex-nav li:nth-child(3)::after {
  background-color: blue;
}

<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>