使用 LESS 将伪 class 类似 hover/focus 嵌套到超链接中

Question

我使用 LESS。

我怎么能说 hover/focus 属于第一个 > a 我可以把 hover/focus 放在 > a 里面吗？

 > ul > li > a {
        color: #fff;
        text-decoration: none;
    }

    > a:hover, > a:focus { // login, register
        background-color: @navbar-background-color;
    }

Answer 1

您可以使用 LESS's Parent Selector (&) 来包含属于当前选择器的选择器：

The & operator represents the parent selectors of a nested rule and is most commonly used when applying a modifying class or pseudo-class to an existing selector.

> ul > li > a {
    ...

    &:hover,
    &:focus {
        ...
    }
}

使用 LESS 将伪 class 类似 hover/focus 嵌套到超链接中

Nest pseudo class like hover/focus into a hyperlink with LESS

css

less