较少的组织:nth-子活动状态

Question

我在这个项目中使用了less，目前正在设计一个导航栏，并使用:nth-child将li元素的样式设置为3的倍数。我还试图管理active状态(如下面的//li active states for nav注释所示)。

我试图使任何active li项目都具有background-color: white。下面的解决方案补充如下：

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

到每个active :nth-child声明。当然，有一种方法可以做一些类似于&:nth-child(all):hover或DRYer的事情，而不是我下面的内容。看我的更少：

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

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

你的少意志输出..。

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