2016-04-13 9 views
1

何らかの理由で、CSSの::selection宣言が機能していないため、デフォルト(Chromeの淡い青色の背景)として常に動作しています。見る方法:: Chromeデベロッパーツールでの選択

コードはこのように私の仮定は、プロジェクトのどこかで何か上書きされている

::selection { 
    background: red; 
} 

a jsbinで正常に動作しますが、私はどこにもスタイルシートで::selectionの別の宣言を見つけることができません。デベロッパーツールでこれを見て、プロジェクトでなぜ機能していないのかを特定またはデバッグしようとする方法があるかどうかは疑問でした。

CSSを指定しても、!importantという宣言は役に立ちません。

編集

OK、私は追加することによって、さらにデバッグしようとした:

<style type="text/css"> 
::selection, ::-moz-selection { 
    background: red !important; 
} 
</style> 

を文書のフッターに、ひいてはそれが、1が1つのステートメントでこれらの2つの宣言を組み合わせることはできませんことが判明これは​​3210にクリスCoyierで言及されました:

私は疑問を持っている:なぜ:: S置くcan't選挙と:: - moz-selectionを一緒にして、両方の値を定義しますか?そうすれば、FFは値を無視します。

これは良いCSSレッスンです!ブラウザがセレクタのいずれかの部分を理解しない場合、セレクタ全体が(カンマで区切られていても)無視されます( )。 の例外がいくつかありますが、ほとんどの場合古いブラウザ(IE 7?)にあります。

すべてがうまくいっていて、もう一度やり直しても問題はないと思いますが、devtoolsでこの宣言をどうにかして見る方法はありますか?

編集2

[OK]を、もちろん、宣言は独自の行に座っているとき、それはインスペクタに表示されます。

編集3

非常に関連のSOの質問:私はちょうど驚いWhy isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?

は、Chromeはちょうどまだ不正な形式のインスペクタでの宣言ではなく、それを完全に隠して表示されません。

+0

面白いことに、私はクロムは今、そのルールを無視して驚いたということです。それは〜には役に立たなかった。少なくとも、Safariはこれを使用していないし、まだそれがあるかどうかわからない。 – BoltClock

答えて

0

inspect要素で確認してみます。

  1. では、素子パネルを検査し、Webページ
  2. を選択し、「検査」オプションをクリックして、スタイルが右側に表示さがあるでしょう。
  3. :選択宣言があります。

enter image description here

+0

OK、 ':: selection'疑似要素が私の編集に関連していた理由は、ベンダーの接頭辞が並んでいたため、インスペクタに表示されませんでした。 – waffl

+0

あなたはあなたのCSSの選択を見ることができますか? :) – Vinaya

+0

はい、ベンダー固有のプレフィックスを区切ることで動作します。 – waffl

関連する問題