css - 减：如何编写 :hover 和 :focus

Question

我刚开始学习 Less 并希望得到这样的结果：

.navbar .nav > li > a {
   /* some rules */
} 

.navbar .nav > li > a:hover {
   /* some rules */
} 

.navbar .nav > li > a:focus {
   /* some rules */
}

我不知道如何在 Less 中写出来。我试过了

.navbar .nav > li > a {
    /* some rules */
    &:hover {

    }
    &:focus {

    }
}

但这不起作用。请帮忙。谢谢你。

Answer 1

这基本上是嵌套的正确格式，但有点不清楚您的期望。也许您期望在and中重复（仅基于您在上面显示的输入和输出 -/* some rules */如果这不是对您的问题的正确理解，请澄清）。然而，这不是嵌套的工作方式。嵌套只选择选择器字符串以附加伪类，它不会自动将在它之外定义的规则填充到其中。您需要像以下选项之一一样更加明确：:hover:focus

选项 1（使用嵌套）

.navbar .nav > li > a {
    /* some rules */
    &:hover {
      /* some rules */
    }
    &:focus {
      /* some rules */
    }
}

选项 2（就像 CSS）

.navbar .nav > li > a,
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
    /* some rules */
}

选项 3（使用带有 mixin 的嵌套）

.setRules() {
    /* some rules you type once */
}

.navbar .nav > li > a {
    .setRules();
    &:hover {
      .setRules();
    }
    &:focus {
      .setRules();
    }
}