带有Sass的样式li标签不起作用（li标签的悬停效果）

Question

我有以下HTML代码：

<button class='drpDwnRp'>Select...<span class='caret'></span></button> 
<ul class='dropdown-menu'> 
    <li><a><i class='glyphicon glyphicon-ok'></i>SELECT All</a></li> 
    <li><a><i class='glyphicon glyphicon-remove'></i>DELETE All</a></li> 
    <li class='divider'></li> 
    <li><a>LIST here</li> 
</ul> 

有人可以让我知道如何用Sass造型吗？

我尝试了以下操作，但没有成功。 欢迎任何建议。

.drpDwnRp{
    @extend .drpDwn;
    color: white;
    text-align:left;
    background-color: red;

    .caret {
        margin-left:169px;
        color:black;
    }

    li:hover {
        background-color:red;
    }
}

.drpDwnRp和.caret样式有效。

Answer 1

两件事情：

1. li不是.drpDwnRp的子.drpDwnRp ，因此li:hover不应嵌套在该类中，而应嵌套.dropdown-menu

2. 这是因为丢失</a>在最后li

 .drpDwnRp { @extend .drpDwn; color: white; text-align:left; background-color: blue; } .drpDwnRp .caret { margin-left:169px; color:black; } .dropdown-menu li:hover { background-color:red; } 

 <button class='drpDwnRp'>Select... <span class='caret'></span> </button> <ul class='dropdown-menu'> <li> <a><i class='glyphicon glyphicon-ok'></i>SELECT All</a> </li> <li> <a><i class='glyphicon glyphicon-remove'></i>DELETE All</a> </li> <li class='divider'></li> <li><a>LIST here</a></li> </ul> 

Answer 2

<li>元素位于.drpDwnRp之外，这就是代码失败的原因。 你应该做这个：

.dropdown-menu {
    li:hover {
        background-color:red;
    }
}

这样便可以按照需要格式化<li> 。 玩得开心！