Scss子样式未应用

Question

我不知道为什么我的。notes-list__item__contents没有得到一个白色的。notes-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>

拥有这个感觉不太好

&: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;
}