在Less中结合:hover与:not()选择器实现行高亮排除指定列

你之前的Less代码逻辑有误：&:hover:not(.notSelectable) 是在判断当前.selectable元素本身是否没有.notSelectable类，但.notSelectable是它的子元素，这个条件永远成立，所以hover时会给整个.row添加背景色，子元素会继承/显示这个背景，自然无法排除目标列。

下面提供两种可行的解决方法：

方法一：父元素加背景，子元素覆盖 #

给 hover 状态的.selectable添加背景色，同时强制.notSelectable子元素使用页面默认背景色，视觉上排除高亮：

.selectable {
  &:hover {
    background-color: @hoverSelectColor;
    
    .notSelectable {
      // 替换成你的页面背景色，比如白色
      background-color: #ffffff;
      // 若有边框或内边距，可调整属性确保完全覆盖父元素背景
      padding: inherit;
    }
  }
}

方法二：直接给目标子元素加背景 #

不给父元素.row加背景，只给.selectable下除了.notSelectable之外的直接子元素添加hover背景：

.selectable {
  &:hover > div:not(.notSelectable) {
    background-color: @hoverSelectColor;
  }
}

这种方法更精准，避免了父元素背景的影响，适合需要严格控制高亮范围的场景。

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