問題タブ [css-cascade]

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.

0 投票する
1 に答える
1773 参照

css - CSS: コンテナーでの選択の無効化、子での有効化 (Firefox では機能しない)

したがって、以下は Chrome では機能しますが、FireFox では機能しません。

コンテナ要素の選択を無効にする方法はありますが、フォーム入力などを選択可能にする方法はありますか?

0 投票する
2 に答える
4188 参照

css - CSS カスケードと例

CSS で意味されているカスケードを説明する例を教えてください。カスケードはいつ役立つのでしょうか。カスケードとカスケードと継承の違いを説明する回答を見てきましたが、CSS カスケードを例で説明する回答はありません。

0 投票する
1 に答える
79 参照

css - 特異性の変化

#sidebar pスタイルの特異性は101(IDの場合は100、タグセレクターの場合は1)ですが、.introスタイルの特異性は10(クラスセレクターの場合は10ポイント)です。101は10より大きいため、#sidebarpが優先されます。.introを#sidebar.introに変更すると、その特異性が110に変更されます。

私はこれを変更しましたが、私の結果は来ていません

誰かが私を説明できますか?

出力:赤色、font-size-1.25em、font-family-Georgiaである必要があります

0 投票する
6 に答える
318 参照

html - CSS優先ロジック

この例では:

http://jsfiddle.net/Ja29K/

ログインリンクを青色にする必要があるのは論理的ではありませんか?

私は、宣言が同じ起源と同じ重要性を持っていることを知っているので、それらをスコアリングする必要があります(セレクターの特異性)。

セレクターの特異性を計算するために、セレクターごとにテーブルを作成しました。

A =インラインスタイルの数:0
B = IDの数:0
C =クラスの数:0
D =要素の数:0

したがって、ログイン要素には、彼の色に関連する3つの衝突があります:a、 #header a#login

要素(A、B、C、D)

a(0、0、0、1)= 1
#header a(0、1、0、1)= 101
#login(0、1、0、0)= 100

セレクター「#headera」が最大のスコアだったので勝ちました。

だが

セレクター「#login」を「a#login」に変更すると、次のようになります。a
#login(0、1、0、1)= 101
引き分けで最後に勝つため、セレクター「#headera」が失われます。それが宣言されました。

だから、私が理解できないことは:

「#headera」セレクターは多くの要素を参照し、IDセレクター(たとえば#login)は1つの要素を参照するだけなので、IDセレクター宣言をその要素に適用するのは論理的ですよね?IDセレクターは、インラインスタイルと同じように、基本的に可能な限り最も具体的なものでなければならないと思うので、このCSS優先順位ロジックを本当に理解することはできません。

PS:私の悪い英語でごめんなさい:)

0 投票する
2 に答える
3733 参照

css - CSS メディア クエリが継承とカスケードの通常の規則に従わないのはなぜですか?

CSS3 メディア クエリで問題が発生しています...

ここに私が現在取り組んでいるものの小さなスニペットがあります:

私は「モバイル ファースト」の観点から作業しており、「カスケード」の側面に関する CSS の通常の動作を考えると、2 番目の@mediaステートメントが前のステートメントからすべてのスタイルを継承し、一致するものをオーバーライドすることが期待されます。または「より重い」セレクター。

(さらに、CSS の優先順位は、一致するスタイル定義が、!importantステートメントで「切り捨て」られない限り、最後に定義されたルールセットを使用することを意味します!)

私が見たところ、テストといくつかの Google / SE 検索を通じて、これは当てはまりません。

スタイル ルールが該当する以前のステートメントから継承される可能@media性はありますか?それとも、ステートメントごとに必要なすべてのルールを繰り返さなければならないのでしょうか? (あまり乾燥していない)

これに関するヘルプと説明/説明をいただければ幸いです。

0 投票する
3 に答える
220 参照

css - CSS がカスケードしない

これは、行番号付きの usersettings.css.erb の一部です

ただし、ページに移動すると、最後ではなく最初のルールがレンダリングされます。

クロム検査

html は、ユーザーの誕生日の日付を選択するための select_date タグを持つ .form-horizo​​ntal を含むフォームです。rails が生成する html は、日番号 #user_birthday_3i を与えます

私はこれで何を逃したのですか?

0 投票する
1 に答える
1011 参照

css - メディア クエリの特異性 - 最大幅のメディア クエリを使用するときに最大のスタイルが使用されるのはなぜですか?

次の(簡略化された)サンプルコードがあります:(jsbin:http://jsbin.com/cisahilido/1/edit?html,css,output

SCSS:

マークアップ:

現在、画面が 480 ピクセル以下の場合、.container背景が赤になることが予想されます。ただし、1024px のブレークポイントまでは常に青い背景があり、その後は背景がありません。

max-width スタイルが小さなブレークポイントを大きなブレークポイントでオーバーライドするのはなぜですか?

0 投票する
2 に答える
53 参照

css - 直接の子セレクターが伝播するのはなぜですか?

スニペットでは、3 番目h2は css の影響を受けるべきではありませんが、それはなぜですか?