問題タブ [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.
css - CSS: コンテナーでの選択の無効化、子での有効化 (Firefox では機能しない)
したがって、以下は Chrome では機能しますが、FireFox では機能しません。
コンテナ要素の選択を無効にする方法はありますが、フォーム入力などを選択可能にする方法はありますか?
css - 特異性の変化
#sidebar pスタイルの特異性は101(IDの場合は100、タグセレクターの場合は1)ですが、.introスタイルの特異性は10(クラスセレクターの場合は10ポイント)です。101は10より大きいため、#sidebarpが優先されます。.introを#sidebar.introに変更すると、その特異性が110に変更されます。
私はこれを変更しましたが、私の結果は来ていません
誰かが私を説明できますか?
出力:赤色、font-size-1.25em、font-family-Georgiaである必要があります
html - CSS優先ロジック
この例では:
ログインリンクを青色にする必要があるのは論理的ではありませんか?
私は、宣言が同じ起源と同じ重要性を持っていることを知っているので、それらをスコアリングする必要があります(セレクターの特異性)。
セレクターの特異性を計算するために、セレクターごとにテーブルを作成しました。
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:私の悪い英語でごめんなさい:)
css - CSS メディア クエリが継承とカスケードの通常の規則に従わないのはなぜですか?
CSS3 メディア クエリで問題が発生しています...
ここに私が現在取り組んでいるものの小さなスニペットがあります:
私は「モバイル ファースト」の観点から作業しており、「カスケード」の側面に関する CSS の通常の動作を考えると、2 番目の@media
ステートメントが前のステートメントからすべてのスタイルを継承し、一致するものをオーバーライドすることが期待されます。または「より重い」セレクター。
(さらに、CSS の優先順位は、一致するスタイル定義が、!important
ステートメントで「切り捨て」られない限り、最後に定義されたルールセットを使用することを意味します!)
私が見たところ、テストといくつかの Google / SE 検索を通じて、これは当てはまりません。
スタイル ルールが該当する以前のステートメントから継承される可能@media
性はありますか?それとも、ステートメントごとに必要なすべてのルールを繰り返さなければならないのでしょうか? (あまり乾燥していない)
これに関するヘルプと説明/説明をいただければ幸いです。
css - CSS がカスケードしない
これは、行番号付きの usersettings.css.erb の一部です
ただし、ページに移動すると、最後ではなく最初のルールがレンダリングされます。
html は、ユーザーの誕生日の日付を選択するための select_date タグを持つ .form-horizontal を含むフォームです。rails が生成する html は、日番号 #user_birthday_3i を与えます
私はこれで何を逃したのですか?
css - メディア クエリの特異性 - 最大幅のメディア クエリを使用するときに最大のスタイルが使用されるのはなぜですか?
次の(簡略化された)サンプルコードがあります:(jsbin:http://jsbin.com/cisahilido/1/edit?html,css,output)
SCSS:
マークアップ:
現在、画面が 480 ピクセル以下の場合、.container
背景が赤になることが予想されます。ただし、1024px のブレークポイントまでは常に青い背景があり、その後は背景がありません。
max-width スタイルが小さなブレークポイントを大きなブレークポイントでオーバーライドするのはなぜですか?
css - 直接の子セレクターが伝播するのはなぜですか?
スニペットでは、3 番目h2
は css の影響を受けるべきではありませんが、それはなぜですか?