CSS：不适用于同一级别的选择器

Question

我有这个HTML，有时候stars--done不存在，但我想改变CSS。

<div class="stars stars--done">
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
</div>

目前我有这个

.stars {
  &:hover {
    i {
      //do somehting
    }
  }
}

如果父不匹配<i>，我只想让.stars--done做点什么

.stars {
  &:not('.stars--done'):hover {
    i {
      //do somehting
    }
  }
}

Answer 1

.stars {
  &:not('.stars--done'):hover {
    i {
        …

这将编译为

.stars:not('.stars--done'):hover i { …

这不是你想要的。删除引号：

.stars {
  &:not(.stars--done):hover {
    i {
        …

Answer 2

不要对选择器进行字符串化，这不是Jquery。只需删除''。

.stars {
  &:not(.stars--done):hover {
    i {
      //do somehting
    }
  }
}

你也可以写：

.stars {
  &:hover:not(.stars--done) {
    i {
      //do somehting
    }
  }
}