Question

我正在使用less来完成这个项目，目前正在设计一个导航栏，并使用:nth-child将li元素设置为3的倍数。我还试图管理{ {1}}州（如下active评论中所示）。

我尝试将任何有效//li active states for nav项目设为li。下面的解决方案增加了：

background-color: white

到活动&:nth-child(3n + 1):hover { background-color: white; }声明的每个。当然，有一种方法可以做:nth-child之类的东西，或者比我下面所做的更糟糕的事情。见我的LESS：

&:nth-child(all):hover

Answer 1

你应该改变这个......

  &: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;
    }
  }

你的LESS将输出......

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

......但你想......

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

在你的所有剩余部分中遵循这种模式。

至于.active州 - li.active将具有与li:nth-child(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;
    }
}

较少组织：n-child活跃状态

1 个答案: