Question

我不明白为什么我的 .notes-list__item__contents 在 .note-list__item:hover 上没有变成白色...我的选择器做错了什么？我在文档中找不到类似的案例。

.notes-list {
    list-style-type: none;
    margin: 0;
    padding: 0;

    &__item {
        padding: 30px;
        background-color: $secondary-color;
        border-radius: 15px;
        margin-bottom: 15px;

        &:hover {
            background-color: $accent-color;
            color: #fff;

            &__contents { color: #fff; }
        }

        &__title {
            font-size: 1.125rem;
            font-weight: 600;
        }

        &__contents {
            margin-top: 20px;
            color: $text-color;
            font-weight: 500;
        }
    }
}

<li className="notes-list__item">
    <div className="notes-list__item__title">Title</div>
    <div className="notes-list__item__contents">
      Some contents
    </div>
</li>

有了这个感觉不太scss

&:hover {
    .notes-list__item__contents { color: #fff; }
}

Answer 1

所以我检查了你的输出 css 和它的结果在下面的 css

.notes-list__item:hover__contents {
   color: #fff;
}

正如您在悬停伪元素之后看到的后缀内容。

如果嵌套悬停，你必须这样写

&:hover &{
    background-color: green;
    color: #fff;

    &__contents { color: #fff; }
}

这将生成以下 CSS

 .notes-list__item:hover .notes-list__item__contents {
     color: #fff;
}

未应用 Scss 子样式

1 个答案: