少李班没有工作

Question

我在我的LESS文件中使用此代码，＆amp;：hover工作正常，但.active无效。

任何人都知道如何解决这个问题？

    li{
      padding: 8% 10%;
      list-style-type: none;
      li.active,
      &:hover{
        background-color: #e33939;
        color: #fff;
      }
      a{
        color: inherit;
        text-decoration: none;
      }
    }

Answer 1

如果您要选择li类名称的active元素，则应使用&，否则您的选择器将编译为descendant combinator selector（li li.active ）选择li.active元素的后代li元素。

li {
      padding: 8% 10%;
      list-style-type: none;
      &.active,
      &:hover{
        background-color: #e33939;
        color: #fff;
      }
      ...
}

这是编译的CSS：

li {
  padding: 8% 10%;
  list-style-type: none;
}

li.active,
li:hover {
  background-color: #e33939;
  color: #fff;
}

...

Answer 2

尝试：

li{
      padding: 8% 10%;
      list-style-type: none;
      &.active,
      &:hover{
        background-color: #e33939;
        color: #fff;
      }
      a{
        color: inherit;
        text-decoration: none;
      }
    }