Блог

У меня есть меню, содержащее множество элементов li. У меня есть пять элементов, я использую flexbox, чтобы выровнять их по последнему элементу, используя margin-left:auto; , чтобы сдвинуть его вправо.

Я также использую transform: skewX (45deg) для создания стрелок для каждого li::before и li::after , и у меня есть начальный цвет фона. Граница стрелки установлена на желтый.

Моя проблема в том, что я хотел бы индивидуально установить цвет для каждого элемента li, кроме последнего элемента li.

Итак, я хотел бы использовать свойство li:nt-child и задать цвет фона, а также учесть значения before и after.

Я предполагаю, что мне также нужно использовать 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;
}
  

Спасибо 🙂

Попробуйте изменить цвет фона для первого, второго и третьего элементов в приведенном ниже 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>