应用CSS：not（）和：将鼠标悬停在Less

Question

我有一些特定类的元素（让我们调用.option），其中一些还有另一个类（让我们调用.selected）。我想在:hover元素上应用一些.option样式定义，但只对那些没有.selected类的元素应用。

我已经发现我必须使用:not()和:hover伪选择器，但它们的组合都没有产生我想要的东西。

此外，我必须在Less中说出这一切。我不太熟悉Less和CSS。

<!-- I'd like to apply :hover only on those options that are not selected -->
<div class="option">
   option 1
</div>
<div class="option selected">
   option 2
</div> 
<div class="option">
   option 3
</div>
<div class="option">
   option 4
</div>

好的同时我发现.option:not(.selected):hover是我需要的CSS选择器......我只是不知道如何用Less编写它。

Answer 1

没关系，我找到了。如果有人遇到同样的问题，你可以通过以下方式实现这一目标：

.option{

    /* ... */

    &:not(.selected):hover {

        /* ... */

    }
}

Answer 2

这可以帮助您减少LESS：

.option {
    &:not(.selected) {
        &:hover {
            color: blue;
        }
    }
}