-1

これは私の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;
        }
    }
}

ルールも適用されない

4

1 に答える 1

0

下ではなく上に動かしてみましたか？そのように機能しますか？

また、補足として、または何かに置き換えjavascript:;ますjavascript:void(0)。

アップデート：

最初の例は機能します

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

DotLess を使用している場合は、DotLess NuGet パッケージを更新してみてください。

于 2013-07-19T00:12:49.377 に答える