:not 与它的实际用法相反

Question

基本上，我想制作一个以图像为背景的部分。最上面是文字。问题是;我尝试了每一种方法来将图像作为新的或（使用点，因此它不会作为代码在 post 中消失）但它让我设置样式的唯一方法图像是如果我把它作为“主要”div 的背景。现在我想做悬停动画，但问题是它还会改变文本不透明度和文本颜色，而不仅仅是背景。当我在谷歌上搜索这个问题时，它说我应该使用“:not(*insert child class name)”并且它不会改变它。问题是下面的代码：

.main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 700px;
    background-image: url(Images/Lavender\,\ Main\,\ Section\ 1\,\ Main\ Header.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.main:hover :not(main__container) {
    color: black;
    opacity: 0.9;
    transition: all 0.3 ease;

}

如您所见，我尝试使用 :not 并且理论上它应该可以正常工作。问题是：它恰恰相反。不是在没有“main__container”的情况下将悬停动画放在“主”上，而是将文本更改为“main__container”而不是“主”背景...

感谢您的帮助。

Answer 1

使用伪选择器时，不能在 class 和伪引用之间留空格。在 :not 中，您还需要提供 . 或 # 可能值得注意的是，在 :not psuedo 中使用 class 不受完全支持在旧版浏览器中（引用 html 元素的地方是）

.main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    border:1px solid rgb(50,50,50);
  
}

.main:hover:not(.main__container) {
    color: black;
    opacity: 0.9;
    transition: all 0.3 ease;
    background-color:red;

}

<main class='main'></main>
<main class='main main__container'></main>

:not 与它的实际用法相反

:not is doing opposite of its actual usage

html

css

web-frontend