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包。

较少的类和元素嵌套

1 个答案: