-1

私は次のCSSを持っています（これはページの最後にロードされます）

.dropdown-menu-normal:hover,
.dropdown-menu-normal a:hover
{
    background: transparent!important;
    color: #5cac7c;
    text-decoration: underline!important;
    text-align: right;
    float: right;
}

.dropdown-menu-normal,
.dropdown-menu-normal a
{
    color: #5cac7c!important;
    text-align: right;
    float: right;
}

このクラスは、標準のブートストラップドロップダウンメニューのLI要素に適用されます。

これは、メニューに直接表示される通常のリンクのようなドロップダウンメニュー項目のスタイルを設定します。これで、！importantフラグがないと、このCSSを使用するためのセレクターを正しく取得できません。

私はこれで実行できることを知っていますが、直接置き換えることができるはずの何かに！importantを使用する必要は本当に嫌いです。

！importanthttp : //jsfiddle.net/y67qP/を使用してどのように表示されるかについてのjsFiddle

http://jsfiddle.net/y67qP/1/なしのjsFiddle

4

2 に答える 2

2

CSSの特異性は、4つの整数（0,0,0,0）から始まります。

Inline style == first number

Id == Second number

Attribute selectors and Pseudo-classes, Classes == Third

Type selectors == Fourth

ファイル内のセレクターの特異性を理解する必要がありbootstrap.cssます。

現在、通常の状態には12の特異性があります（1つのクラス-2つの要素）

.dropdown-menu > li > a== 12

あなたの.dropdown-menu-normal, .dropdown-menu-normal a==それぞれ10/11

通常の状態が機能するようにするには、セレクターを次のように具体的にします。

ul .dropdown-menu-normal, ul .dropdown-menu-normal aそしてそれはうまくいくようです。

ホバーの場合は、同じ概念に従うだけで、オーバーライドできます。

これが例です

于 2013-03-01T16:30:06.297 に答える
1

重要なものを使用する必要をなくすには、セレクターをより具体的にする必要があります。つまり、DOMをさらに上に移動して、その特定の要素の精度を高めます。

.dropdown-menuたとえば、 etcの代わりに、最初から始めて.dropdown .dropdown-menu、必要に応じてさらに上に移動することができます。

于 2013-03-01T15:58:43.717 に答える