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

两件事：

li不是.drpDwnRp的孩子，因此li:hover不应该嵌套在该类中，而是.dropdown-menu而不是
您在最后</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

_(friends).each(function(friend, i){ $('ul').append('<li>' + friend.name + '</li>'); });元素不在<li>之内，这就是您的代码失败的原因。你应该这样做：

.drpDwnRp

您的.dropdown-menu { li:hover { background-color:red; } }将如何格式化为您想要的格式。玩得开心！

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

2 个答案: