-1

CSS 'color' 属性の 2 つのエントリが 1 つの要素でアクティブになっているのをときどき見ます。!important のないものが優先されますが、当然のことです (要素の色を強制しようとしています: 白)。スクリーンショットを参照してください:

ここに画像の説明を入力

ありがとう！

更新: html マークアップを追加

<div class="x-button x-button-back x-layout-box-item x-stretched" id="quit-button" style="width: auto !important;">
  <span class="x-badge" style="display: none;"></span>
  <span class="x-button-icon x-hidden" id="ext-element-1109"></span>
  <span class="x-button-label" style="" id="ext-element-1110">Quit</span>
</div>

.peacekeepers-edition は本体内の最初の要素に設定され、 #playview は遠い子孫です。

4

2 に答える 2

1

私はあなたのマークアップについていくつかの仮定を立てています (あなたが何も提供していないため) が、これはあなたの問題であると言っても過言ではないと思います.

マークアップが次のようなものであると仮定します...

<div class="peace-keepers-edition">
    <div id="playview">
        <button class="x-button-back">
            <i class="x-button-icon">icon</i>
        </button>
    </div>
</div>

最初のセレクターはボタン要素をターゲットにしています...

.peace-keepers-edition #playview .x-button-back {
    color: #FFF !important;
}

しかし、2番目のセレクターは、ボタンの子孫である要素をターゲットにしています...

.peace-keepers-edition #playview .x-button-back .x-button-icon {
    color: #ccccff;
}

セレクター!importantが異なる要素をターゲットにしているため、ルールは無関係です。

簡単な修正; この行を次の行に追加し769ます...

.peace-keepers-edition #playview .x-button-back .x-button-icon {
    color: #fff;
}

壊れた例... 

body {
    background: #1a1a1a;
}
button {
    padding: 15px;
    font-size: 30px;
    background: green;
}

.peace-keepers-edition #playview .x-button-back {
    color: #FFF !important;
}

.peace-keepers-edition #playview .x-button-back .x-button-icon {
    color: #ccccff;
}
<div class="peace-keepers-edition">
    <div id="playview">
        <button class="x-button-back">
            <i class="x-button-icon">icon</i>
        </button>
    </div>
</div>

作業例... 

body {
    background: #1a1a1a;
}
button {
    padding: 15px;
    font-size: 30px;
    background: green;
}

.peace-keepers-edition #playview .x-button-back {
    color: #FFF !important;
}

.peace-keepers-edition #playview .x-button-back .x-button-icon {
    color: #fff;
}
<div class="peace-keepers-edition">
    <div id="playview">
        <button class="x-button-back">
            <i class="x-button-icon">icon</i>
        </button>
    </div>
</div>

于 2015-04-27T21:21:41.920 に答える