Css 较少组织：第n个子活动状态

我正在为这个项目使用less，目前正在设计一个导航栏，并使用

：nth child

将

li

元素的样式设置为3的倍数。我还试图管理

活动

状态（如下所示

//li导航的活动状态

注释）

我正在尝试使任何活动的

li

项目具有

背景颜色：白色

。下面的解决方案添加了：

            &:nth-child(3n + 1):hover {
              background-color: white;
            }

到每个活动的

：n个子
声明。当然有一种方法可以做像
&:nth child（all）：hover
或者比下面的更干爽的事情。见我的少：

       li {
          color: white;
          padding: 0.9em;
          // nav item 1 and multiple
          &:nth-child(3n + 1) {
            border-top: 2px solid @blue;
            &:nth-child(3n + 1):hover {
              background-color: @blue;
            }
          }
          // nav item 2 and multiple
          &:nth-child(3n + 2) {
            border-top: 2px solid @red;
            &:nth-child(3n + 2):hover {
              background-color: @red;
            }
          }
          // nav item 3 and multiple
          &:nth-child(3n + 3) {
            border-top: 2px solid @green;
            &:nth-child(3n + 3):hover {
              background-color: @green;
            }
          }
        }
        // li active states for Nav
        .active {
          background-color: white;
          &:nth-child(3n + 1) {
            color: @blue;
            &:nth-child(3n + 1):hover {
              background-color: white;
            }
          }
          &:nth-child(3n + 2) {
            color: @red;
            &:nth-child(3n + 2):hover {
              background-color: white;
            }
          }
          &:nth-child(3n + 3) {
            color: @green;
            &:nth-child(3n + 3):hover {
              background-color: white;
            }
          }
        }

你应该改变这个

  &:nth-child(3n + 1) {
    border-top: 2px solid @blue;
    &:nth-child(3n + 1):hover {
      background-color: @blue;
    }
  }

。。。对此

  &:nth-child(3n + 1) {
    border-top: 2px solid @blue;
    &:hover {
      background-color: @blue;
    }
  }

你的少将输出

li:nth-child(3n + 1):nth-child(3n + 1):hover

。。。但是你想要

li:nth-child(3n + 1):hover

在你的生活中，遵循这个模式

至于
.active
状态-
li.active
将具有与
li:n子项（3n+1）
等相同的特异性，因此只需在第n个选择器后面包含
li.active

//编辑-最终解决方案

li {
    color: white;
    padding: 0.9em;
    // nav item 1 and multiple
    &:nth-child(3n + 1) {
        border-top: 2px solid @blue;
        &:hover {
            background-color: @blue;
        }
        &.active{
            color: @blue;
        }
    }
    // nav item 2 and multiple
    &:nth-child(3n + 2) {
        border-top: 2px solid @red;
        &:hover {
            background-color: @red;
        }
        &.active{
            color: @red;
        }
    }
    // nav item 3 and multiple
    &:nth-child(3n + 3) {
        border-top: 2px solid @green;
        &:hover {
            background-color: @green;
        }
        &.active{
            color: @green;
        }
    }
    // li active states for Nav
    &.active{
        background-color: white;
    }
}

谢谢，这在组织上很有帮助。关于将相同的：悬停状态应用于所有活动类项的任何细节？抱歉-请参阅我的编辑。。。这将解决第二个问题。