在Less中使用:not()和:hover伪选择器实现指定元素hover样式

别担心，这个问题其实很好解决！核心就是正确组合:not()伪类和:hover伪选择器，再结合Less的语法特性来实现。

核心逻辑 #

我们需要选中同时满足以下两个条件的元素：

1. 拥有.option类
2. 没有.selected类
   然后在鼠标悬停时应用样式。对应的CSS选择器是.option:not(.selected):hover，在Less里可以直接使用这个选择器，或者用更直观的嵌套写法。

写法一：直接使用复合选择器（和原生CSS写法一致） #

这种写法对不熟悉Less嵌套的新手很友好，直接写出完整选择器即可：

.option:not(.selected):hover {
  background-color: #f0f0f0;
  color: #333;
  // 这里可以添加你需要的其他hover样式，比如边框、过渡效果等
}

写法二：Less嵌套写法（更符合Less的语法习惯） #

Less支持嵌套选择器，你可以把:hover和:not()嵌套在.option下面，结构更清晰，也方便后续扩展.option的其他样式：

.option {
  // 这里可以写.option元素的基础样式，比如默认字体、 padding等

  &:not(.selected) {
    &:hover {
      background-color: #f0f0f0;
      color: #333;
      // 自定义hover样式
      transition: background-color 0.2s ease; // 可选的过渡动画
    }
  }
}

这里的&代表父选择器，编译后会生成和第一种写法完全一样的CSS代码，避免了重复写父选择器的麻烦。

可能的错误排查 #

如果你之前尝试失败，大概率是这两个原因：

• 选择器顺序错误：比如写成.option:hover:not(.selected)，虽然效果类似，但逻辑上是先选中hover状态的.option再排除带.selected的，不过更推荐先排除选中项再设置hover的顺序；
• Less嵌套时忘了用&：比如直接写:not(.selected)而不是&:not(.selected)，这样会生成.option :not(.selected)（注意空格），变成选中.option内部的子元素，而不是.option本身，这就会导致样式完全不生效！

内容的提问来源于stack exchange，提问作者ACs