問題タブ [css-specificity]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - ホバー疑似クラスがアクティブな疑似クラスをオーバーライドするのはなぜですか
タイトルは基本的にそれをすべて言います。
色を変更したい要素:hover
がありますが、クリックすると元の色に戻したいとします。だから、私はこれを試しました:
結局のところ、これは機能しません。何度も頭を悩ませた後、私は:hover
状態が状態を上書きしていることに気づきました:active
。これはこれによって簡単に解決されました:
(1番目のルールと3番目のルールを組み合わせることができます)。
これがフィドルです:http://jsfiddle.net/V5FUy/
私の質問:これは予想される動作ですか?私がこれを理解している限り、状態はほとんど常に状態を伴うので、状態:active
は常に状態をオーバーライドする必要があります。:hover
:active
:hover
css - 複数のスタイルシートによる css セレクターの特異性の競合
わかりました、私はstackoverflow cssセレクターを読んでいます。ここのスレッドで、この構文の違いは何ですか? ^= とはどういう意味ですか? それは何を選択していますか?全て?
と
また、次のようなステートメントもあります。 注: 同じ単純なセレクターが繰り返し出現することは許可されており、具体性が向上します。
どういう意味ですか?
Web サイトで大量の CSS コードをクリーンアップする必要があるため、質問しています。それぞれが 200 行以上のコードを含む 10 以上のスタイルシートがあり、スタイルシート間で互いにオーバーライドしているスタイルがあります。スタイルシートを 1 行ずつ調べて、どの特定のクラス、div などが別のクラス、div などをオーバーライドしているかを調べるのは骨の折れる作業であり、特異性の一部は 7 つのセレクターの深さです! それは私にはほとんど不可能であり、非常にストレスがたまる。
他のスタイルを上書きするスタイルを対象とするツールはありますか? 使い方は簡単で、正確には何をしますか? そうでない場合、非常に長いセレクターを使用せずに十分な特異性を備えた CSS を作成して、別のスタイルシートのルールによって上書きされないように一意性を確保するにはどうすればよいでしょうか?
ありがとう、これが何らかの意味を持ち、誰かがこの経験をしたことを願っています.
css - CSSで「foo bar」と「foo > bar」が同じ特異性を持つのはなぜですか?
または他のコンビネータを使用しても CSS セレクターの特異>
性に影響しない理由、つまり( div 内のどこかでスパンを一致させる) と(div の直接の子であるスパンを一致させる) が特異性に関して等しいと見なされる理由に興味があります。div span
div > span
コンビネータの使用は特異性とはまったく無関係であることは認識していますが、それには特定の理由があるのではないかと思います。
css - IDがクラスよりも具体的でない理由がわかりません
私が持っている:
これが私のCSSです。
問題は、クラスをオーバーライドするためのより具体的なIDを取得できないことです。運が悪かったので、いろいろな方法でやってみました。それが問題なら、私はChromeを使用しています。ありがとう。
css - 1つの要素と特異性で複数のクラスを使用する
のような1つの要素で複数のクラスを使用する場合class="foo bar"
、それらのクラスは次のように設定されます。
どのクラスに特異性がありますか?マージンは10pxまたは0pxになりますか?
css - CSS の特異性を確認するためのツール
特定の div をターゲットにするために、CSS の特異性に基づいて最適な CSS セレクターを表示/選択するための何らかのツールがあるかどうかは誰にもわかりませんか?
何がより特異性が高いかは知っていますが、CSS に深くネストされたセレクターがある他の人々のプロジェクトに取り組んでいると、そこをオーバーライドする方法を見つけるのが難しい場合があります。
Google chromes dev tool/firebug では、ページのソースを表示すると下部に多くの情報が表示されることを知っていますが、これに使用する必要があるものですか、それとも他の方法がありますか?
css - 名前付き要素内のハイパーリンク css の特異性
HTML
CSS
こんな感じ
2 番目のハイパーリンクが緑ではなく赤である理由がよくわかりません。の特異性は#inner
より高くありませa
んか?また、フォントサイズは に継承される#inner a
ため、さらに混乱します。
html - より具体的なCSSルールが機能していない
次のコードでは、h1のより具体的なルールを#inner h1として定義し、#containerh1も定義されているためより具体的でないルールを定義しました。ただし、#containerh1が#innerh1の後に置かれると、それが有効になり、#inner h1は無視されますが、より具体的であるため、無視されるべきではありません。
問題を理解するのを手伝ってください。
CSS:
HTML:
css - 何も適用されないようにCSSクラスをオーバーライドするにはどうすればよいですか?
私が実際に言おうとしているのは、タイトルがおかしい場合は申し訳ありませんが、独自のスタイルを適用しているフレームワーク (Richfaces) があるということです。私は会社の CSS を持っていますが、私は CSS の専門家ではありません。会社の CSS にあるものに何も適用されないように、richfaces からの css をオーバーライドするだけです。
これは、適用したくないリッチフェイスからの CSS です。
css - どのスタイルを適用するかは、CSS の特異性によってどのように決定されますか?
CSS は、あるスタイルを別のスタイルに適用するタイミングをどのように決定しますか?
私はW3 の CSS3 セレクター ドキュメントを数回読んでおり、jQuery で CSS セレクターをより適切に使用する方法を理解するのに役立ちましたが、ある CSS ルールが別のルールに適用されるタイミングを理解するのにはあまり役立ちませんでした。
私は次のHTMLを持っています:
私は次のCSSを持っています:
上記の場合、リンク 1 とリンク 2 の両方が、.item a
CSS によって決定されるように同じスタイルになります。に関連付けられたスタイル.special
がリンク 2 で優先されないのはなぜですか?
明らかに、次のように回避できます。
しかし、それは私の理解不足のために振り込まなければならないハックのように感じます.