問題タブ [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.
css - HTML 要素に適用されたスタイルは常にオーバーライドされます
<html>要素と要素にスタイルを適用します<body>。<html>要素のスタイルを のスタイルに適用することは可能<bodyですか?
CSS を に適用すること<html>は、CSS 固有の通常のルールに従っていないようです。これは本当ですか？
すべての背景色を赤にするようにしてください。
css - 指定順ではなく宣言順で設定される色プロパティを定義する複数のクラスの優先順位
color プロパティを定義する特定性が等しい 2 つのクラスを考えると、要素の class 属性にリストされている最後のクラスが優先されると思いました。
http://htmlhelp.com/reference/css/structure.htmlから:
指定の順序簡単にするために、2 つのルールの重みが同じ場合は、最後に指定されたルールが優先されます。
次のバキューム コードの例では、クラス ルール セットが定義されている順序によって優先順位が決まります。ここでは、最後または最新のクラス ルール セット定義が優先されます。
出力テキストは緑色です。
クラス宣言の順番を入れ替えて、最初に .makeGreen を宣言すると
出力テキストは青色です。
これは今まで気にしたことがありません。edit要素のclass属性にリストされている最後のクラスが優先されると思いました。
編集 明確にするために --> 要素をペット、たとえば犬と考えることがあります。要素の class 属性にクラスを追加すると、犬にコマンドが発行されます。座るように言って、後で横になるように言うと、犬は横になると思います。横になる方法を教えた後（最近では）に座る方法を教えたからといって、犬が座ったままでいるとは思いません。
それで... 2つの質問です。
- これが本来あるべき姿ですか？答えた
- もしそうなら...なぜですか？どちらが他の宣言より前に宣言されたかを判断するために、クラス宣言を掘り下げる必要があるという利点がわかりません。
どうもありがとう！
css - CSS 固有の問題 - このセレクターが優先されるのはなぜですか?
編集：
CSS を確認した後、頭に大きな穴が開いていることに気付きました。実際の問題は、 でcolorルールを定義していなかったという単純な事実でbar.css .footer-link:hoverあり、明らかに のカラー ルールfoo.css a:hoverが適用されていました。CSS 101. 今日は金曜日です。私は明らかに週末が必要です。ご協力いただきありがとうございます！
プロジェクトの UI に取り組んでいるときに興味深いものを見つけました。これは、CSS の特異性を取り巻く私の理解不足に関連していると確信しています。私はいくつかの調査を行いましたが、まだ自分の問題を解決できないようです。
とにかく、2 つの異なるスタイルシートに含まれるアンカー要素の定義済みのスタイルがいくつかあります。簡単にするために、それらfoo.cssを と と呼びますbar.css。foo.css前のページに含まれていますbar.css
にfoo.cssは、次のルールがあります。
にbar.cssは、次のルールがあります。
HTML マークアップは次のとおりです。
私が理解しているように、より特異性が高いにもかかわらず、スタイルhoverが適用されているようです。予想どおり、通常のアンカー スタイルが適用されています。foo.css.footer-link:hover
だから私の質問は：
ホバー ルールがページの後半に含まれており、より具体性が高いはずなfoo.cssのに、なぜホバー ルールが適用されるのですか?bar.css.footer-link:hovera:hover
前もって感謝します！
javascript - CSS .addClass が特定ごとに適切なスタイルを適用しないのはなぜですか?
CSS 固有性の概念を理解しています。これが私の状況です：
私は「成功」というクラスのスタイルを持っています。これにより、単に色が緑色になります...など。現在、.success を定義する 2 つの個別の css ファイルがあります (異なるスタイルを定義しています)。これらを Site.css と Page.css と呼びましょう。
Site.css のクラスは次のとおりです。
Page.css のクラスはより具体的です。
javascript (jquery を使用) で、次のようなクラスを追加します。
ここで、ブラウザー デバッガー (F12) を使用してこれを調べると、(Page.css ではなく) Site.css スタイルが適用されていることがわかります。Page.css で定義されたクラスの方が具体性が高いと思ったので、それを呼び出す必要があります。css の特異性がどのように機能するかについての理解が欠けていますか?
html - Joomla モジュールの CSS オーバーライド
私はJoomlaモジュールを構築しましたが、これは特定の電卓の単なるエコーです。書式設定のために、エコーにテーブルがあります。Joomla の外部でスクリプト全体を使用すると、すべて問題ないように見えます。しかし、Joomla がテーブルに CSS を強制していることに気付きました。私のCSSは有効でロードされているはずです。とても簡単です:
私はすでにFirebugでそれをチェックしました。ただし、firebug は、私のテーブルがそのスタイルを継承していると言っています
*beez_20* テンプレートに付属する nature.css というファイルから。この小さな変更だけで、テーブル全体の外観が破壊されるのは非常に面倒です。また、テンプレートの CSS を変更せずにテーブルのスタイルを変更する方法を見つけることができません。(このモジュールをインストールするこれらのユーザーには変更がなく、私には変更が加えられるという事実のため)。では、Joomla が私の CSS を使用せず、代わりにそれを独自のものでオーバーライドするのはなぜだろうか?
css - 同じ特異性、配置を考慮した後、:first-letter が常に勝つ?
この jsfiddle を見てください: http://jsfiddle.net/ZNddz/
最初のルールは、1 つのクラス セレクターと 1 つのpseudo-elementセレクターで構成されます = 11
2 番目のルールは、1 つのクラス セレクター.letterと 1 つのタグ セレクターで構成されますspan= 11
どちらのルールも同じ特異性を持っているため、勝者が最後のスタイルであると考えるのが妥当です。明らかにそうではありません。そこでbackground-color、2 番目のルールにプロパティを追加することにしました。ご覧のとおり、高さは 30px です。
このことから、両方のルールが同じ要素を選択していないと推測します。しかし、この効果について公式に説明したいのはちょっと奇妙です.
jquery - CSS の特異性と選択的優先度と思われるもの
JQuery UI を使用して、ポップアップし、フォームに情報を入力するように求めるモーダル ウィンドウを作成しています。ユーザーが必要な情報を入力しない場合、テキスト フィールドは赤い境界線で強調表示されます。
ただし、フィールドの境界線を手動で変更したため、テキストエリアの境界線が赤に変わるだけです。入力フィールドとテキストフィールドの CSS ルールは同じですが、結果には違いがあります。
入力フィールドのエラー:
テキストエリアのエラー:
CSS:
開発者コンソールから CSS を見ると、どちらが優先されているかがわかります。しかし、なぜ違いがあるのでしょうか？
入力フィールドの CSS:
テキストエリアの CSS:
簡単に言えば、入力フィールドとテキストエリアの両方を赤い境界線で囲みたいと思いますが、選択的な優先順位があるように見える理由も理解したいと思います。