Li:nth-child() 颜色格式的菜单

Question

我有一个菜单，里面有 ul li 项目。我有五个项目，使用 flexbox 将它们与最后一个项目对齐，使用 margin-left:auto; 将其推到右侧。

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

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

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

我猜我还需要使用 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-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>