html - LESS 类和元素嵌套

Question

这是我的html

<div class="tabs">
            <ul>
                <li class="active">
                    <a href="javascript:;">Best</a>
                </li>
                <li>
                    <a href="javascript:;">Bussiness</a>
                </li>
                <li>
                    <a href="javascript:;">First</a>
                </li>
            </ul>
<div>

这是我的少那不起作用

.tabs {
    ul {
        li {
            list-style: none;
            float: left;
            background-color: #eee;
            padding: 8px 12px 8px 12px;
            border-left: solid 1px #ccc;
            border-right: solid 1px #ccc;
            border-top: solid 1px #ccc;
            cursor: pointer;
            margin-right: 5px;

             &.active {
                border-left: solid 1px #999;
                border-right: solid 1px #999;
                border-top: solid 1px #999;
                background-color: #999;
                color: #fff;
            }
        }
    }
}

这是我的工作量较少

.tabs {
    ul {
        li {
            list-style: none;
            float: left;
            background-color: #eee;
            padding: 8px 12px 8px 12px;
            border-left: solid 1px #ccc;
            border-right: solid 1px #ccc;
            border-top: solid 1px #ccc;
            cursor: pointer;
            margin-right: 5px;
        }
    } }


.tabs {
    ul {
        li {
            &.active {
                border-left: solid 1px #999;
                border-right: solid 1px #999;
                border-top: solid 1px #999;
                background-color: #999;
                color: #fff;
            }
        }
    } }

我在其他情况下多次遇到这个问题，我可以看到生成的 css 是相同的

请帮忙

我试着让它像这样

我已经做到了

.tabs {
    ul {
        li {

            &.active {
                border-left: solid 1px #999;
                border-right: solid 1px #999;
                border-top: solid 1px #999;
                background-color: #999;
                color: #fff;
            }




            list-style: none;
            float: left;
            background-color: #eee;
            padding: 8px 12px 8px 12px;
            border-left: solid 1px #ccc;
            border-right: solid 1px #ccc;
            border-top: solid 1px #ccc;
            cursor: pointer;
            margin-right: 5px;
        }
    }
}

并且规则也不适用

Answer 1

您是否尝试将其向上移动而不是向下移动？它是这样工作的吗？

另外，在旁注中，替换javascript:;为javascript:void(0)或其他内容。

更新：

第一个例子确实有效

http://jsbin.com/oxekih/1/edit

如果您正在使用 DotLess，请尝试更新您的 DotLess NuGet 包。