禁用SASS中元素的悬停属性

Question

假设我们有：

.a {

    /** Some properties here **/

    .b {
        /* Some properties here **/
    }

    &:hover {
        .b {
            /* change b here */
        }
    }
}

还有一个元素<div class = "b">，有没有办法防止将悬停属性应用于此div？

我试过了：

.a {

    /** Some properties here **/

    .b {
        /* Some properties here **/
    }

    .c {
        /* empty */
    }

    &:hover {
        .b:not(.c) {
            /* change b here */
        }
    }
}

我还将课程设置为<div class = "b c">。

任何帮助都会被理解，这个scss文件被其他文件共享，所以我不想太多地改变它。

Answer 1

  

假设我只想将它应用于具有类b但不是b和c的div。我该怎么办？

这应该这样做，假设您希望悬停效果应用的所有元素都是div元素：

&:hover {
    div:not([class*='b c']) {
      /* stuff here */
    }
}

请注意，课程的顺序非常重要，因此课程c必须在课程b之后立即开始。

<强> Codepen

了解每个选择器的作用here。