3

!importantより具体的な宣言が別の宣言を上書きしていないケースに遭遇した人はいます!importantか? ベースCSSは次のとおりです。

.x-floating {
  position: absolute !important;
  z-index: 10000 !important;
}

そして、z-index をオーバーライドするために使用したいものは次のとおりです。

.x-msgbox.x-floating {
  z-index: 10001 !important;
}

Windows で Chrome (または Safari) デバッガーを使用して調べると、.x-msgbox.x-floating宣言が上書きされ (取り消し線が引かれ)、x-floating宣言がアクティブになっていることがわかります。これは、css の特異性について私が知っていること、および簡略化されたテストに期待することとは異なります。

コード例:

私は Sencha を使用しているので、これは Chrome または Safari でのみ機能しますが、ここにjsFiddle リンクがあります(おそらく、Sencha のソースをホットリンクするのは適切ではありませんが、問題になるほど十分なビューを取得することはできません)。テストを実行するには、[日付を選択] ボタンをクリックし、ホイールの 1 つをドラッグして回転させます。メッセージボックスが表示されます。メッセージ ボックスを日付ピッカーと比較します (それぞれのトップ レベルの要素 — 本体の子要素。これを行う別の方法は、 class を持つ要素を探すことですx-floating)。

4

2 に答える 2

0

!importantそのcssの最高の優先順位を設定します

なぜ.x-msgbox.x-floatingですか？だけではありませ.x-msgboxん。

初めて.x-floating最優先するので、次回は重要（z-inbdex.10001）がありますが、今回は無視されます。

最初の!importantものは削除できます

新しいクラスを作成して、新しい値で直接上書きしてみませんか？

そしてx_msgbox多分また良いでしょう

于 2011-05-14T16:31:50.350 に答える