6

ドロップダウンメニューの要素の色を変更しようとしています。ドロップダウンは次のHTMLで作成されます。

<div class="btn-group">
    <a class="btn">Confirm</a>
    <a href="#" id="drop_thought" role="button" class="dropdown-toggle btn white-text" data-toggle="dropdown">v</a>
    <ul class="dropdown-menu white-text" id="tools_drop" role="menu" aria- labelledby="drop_thought">
        <li><a class="btn btn-success white-text">Okay</a></li>
        <li><a class="btn btn-warning">Unload</a></li>
        <li><a class="btn btn-danger">Quarantine</a></li>
        <li class="divider"></li>
        <li><a class="btn btn-primary">Permanent</a></li>
    </ul>
</div>

読みやすいようにIDを消去しました。

次のようなCSSクラスを作成しました。

.white-text {
    color: #FFFFFF; !important
}

自動的にOkayが白になると思いました!importantが、まだ黒です。Chromeの開発者コンソールの下で囲まれた<li><a>...</a></li>要素を調べたところ、それが継承しているクラスのようです。何らかの理由で、myは無視され、取り消し線が引かれます。white-text.dropdown-menu awhite-text

次のCSSを使用して、テキストの色を白に変更できましたが、別の場所でドロップダウンを使用しているため、これを使用できません。

.dropdown-menu a{
    color: #FFFFFF; !important
}

Chromeによる継承チェーンは次のとおりです。

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a - #ffffff
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] - #ffffff
.btn:hover - #333333
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] - #333333 .dropdown-menu a - #333333
a:hover - #005580
.white-text - #FFFFFF
.btn-success - #ffffff
.btn - #333333
a - #0088cc
.white-text - #FFFFFF
body - #333333
4

1 に答える 1

13

セミコロンは！importantの後に続きます。そうでない場合、セミコロンはそのプロパティに含まれません（CSSは空白/戻り値を処理しません）。

正しい使用法：

.dropdown-menu a{
    color: #FFFFFF !important;
}

http://css-tricks.com/when-using-important-is-the-right-choice/

于 2013-01-18T18:42:47.707 に答える