Css Sass如何在：not（）伪类中使用符号AND来表示没有父类？

我需要添加一个条件“非父类”的代码，但它不工作

以下是我尝试过的：

.display-download-icon {
  &:not(.media-2 &){ // if it does not has a parent with .media-2 class
    &:hover {
      .image-overlay {
        display: block;
        opacity: 1;
        z-index: 2;
      }
    }
  }
}

但它可以转化为以下CSS：

.display-download-icon:not(.media-2 .display-download-icon):hover .image-overlay {
  display: block;
  opacity: 1;
  z-index: 2;
}

HTML结构是：

<div class="media-2">
  <div class="display-download-icon">
    <div class="image-overlay"></div>
  </div>
</div>

你能帮忙吗？ 谢谢

所有的

“&”

都充当前面的父选择器的别名，这就是为什么您会得到编译后的输出（因为.media-2类名后面有“&”）。您只需要删除最后一个“&”，它就可以正常编译了

.display-download-icon {
  &:not(.media-2){ // removed the "&"
    &:hover {
      .image-overlay {
        display: block;
        opacity: 1;
        z-index: 2;
      }
    }
  }
}

上面的代码可以编译为 .显示下载图标：非（.media-2）：悬停。图像覆盖{ 显示：块； 不透明度：1； z指数：2； }

但您也可以删除一些嵌套，使其更具可读性

.display-download-icon:not(.media-2):hover {
  .image-overlay {
     display: block;
     opacity: 1;
     z-index: 2;
   }
}

---

这将编译为相同的输出。

遗憾的是，CSS中没有父选择器，因此这实际上不是一个Sass符号问题，而是CSS的核心行为

您需要编写如下专用规则：

/*基本图标样式*/
.显示下载图标{
...
}
/*父案例的单独规则*/
分区：不是（.media-2）{
.显示下载图标{
&：悬停{
.图像叠加{
显示：块；
不透明度：1；
z指数：2；
}
}
}
}

首先，我们必须弄清楚一些事情。你可能误解了这个有点不幸的标题。尽管CSS有一个子选择器，但它不可能选择父对象。由于SASS只是编写CSS的一种更方便的方式，因此SASS也不能有这样的功能。这就是说，让我们继续讨论你的问题

如果我理解正确，则仅当

图像覆盖

元素未包含在类为

媒体-2

的元素中时，才希望在该元素上具有悬停效果。 如果是这样的话，那么你必须改变你的方法

首先，定义正常行为，即除具有

.media-2

类的元素外，所有元素的预期行为。然后为

.media-2

类子类定义新规则

无礼

。显示下载图标{
显示：block；/*仅用于演示*/
高度：100px；/*仅用于演示*/
宽度：100%；/*仅用于演示*/
边框：1px纯黑；/*仅用于演示*/
保证金底部：10px；/*仅用于演示*/
>.图像叠加{
显示：块；
不透明度：1；
z指数：2；
高度：100%；/*仅用于演示*/
宽度：100%；/*仅用于演示*/
&：悬停{
背景：红色；/*仅用于演示*/
}
}
}
.media-2.显示下载图标>。图像覆盖：悬停{
背景：无；/*仅用于演示*/
}

一小条 检查此代码段的功能

。显示下载图标{
显示：块；
高度：100px；
宽度：100%；
边框：1px纯黑；
边缘底部：10px；
}
.显示下载图标>.图像覆盖{
显示：块；
不透明度：1；
z指数：2；
身高：100%；
宽度：100%；
}
.显示下载图标>。图像覆盖：悬停{
背景：红色；
}
.media-2.显示下载图标>。图像覆盖：悬停{
背景：无；
}

这并不能解决问题。HTML结构是父选择器，因为符号和存在于SASS中。就像.child{.parent&{}}翻译成.parent.child谢谢！“就是这个。”费利佩托莱多很乐意帮忙。如果此答案或任何其他答案解决了您的问题，请将其标记为已接受。