为什么这个CSS无效？

我有这个CSS:

.optionQuiz a:hover{
        .Qtick{
            background-color: green;
        }
    }

<div class="optionQuiz">
<a href="#">
<span class="Qtick">1</span>
</a>
</div>

我的HTML:

.optionQuiz a:hover{
        .Qtick{
            background-color: green;
        }
    }

<div class="optionQuiz">
<a href="#">
<span class="Qtick">1</span>
</a>
</div>

我的目标： 我的目标是当用户将鼠标悬停在要高亮显示的

范围内的

'

类上

我的问题： 为什么这个CSS不起作用？这的确是个好办法，但似乎这样的事情还没有发明出来？为什么？我应该使用JavaScript吗？我不想要。我想用CSS的方式

---

感谢您的任何帮助

对于普通CSS，不能使用嵌套选择器

您可以使用诸如Sass、POSTSS之类的预处理器来完成这项工作

如果您只想使用CSS，则必须使用以下内容：

a：悬停span.Qtick{
颜色：红色；
}

---

对于普通CSS，不能使用嵌套选择器

您可以使用诸如Sass、POSTSS之类的预处理器来完成这项工作

如果您只想使用CSS，则必须使用以下内容：

a：悬停span.Qtick{
颜色：红色；
}

---

您不需要使用JavaScript。用CSS只能用一种非常简单的方法来解决这个问题。请参见以下代码段：

.option测验a:悬停.Qtick{
背景颜色：绿色；
}
.选项测验a：悬停。其他1{
背景颜色：蓝色；
}
.选项测验a：悬停。其他2{
背景颜色：黄色；
}

---

您不需要使用JavaScript。用CSS只能用一种非常简单的方法来解决这个问题。请参见以下代码段：

.option测验a:悬停.Qtick{
背景颜色：绿色；
}
.选项测验a：悬停。其他1{
背景颜色：蓝色；
}
.选项测验a：悬停。其他2{
背景颜色：黄色；
}

不确定是什么

  .Qtick{
            background-color: green;
        }

是为了

如果你想改变颜色 这将有助于：

.optionQuiz a:hover{
            background-color: green;

    }

如果只希望量程更亮，请使用以下选择器：

.optionQuiz a:hover >span.Qtick{
        background-color: green;

}

不确定什么

  .Qtick{
            background-color: green;
        }

是为了

如果你想改变颜色 这将有助于：

.optionQuiz a:hover{
            background-color: green;

    }

如果只希望量程更亮，请使用以下选择器：

.optionQuiz a:hover >span.Qtick{
        background-color: green;

}

---

因为这不是css，所以这是一种较少的方法。为什么你不能做一些像

.optionquick a:hover.Qtick{background color:green；}

？因为这不是css，这是一种更简单的方法。为什么你不能做一些类似于

.optionquick a:hover.Qtick{background color:green；}

？