問題タブ [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.
javascript - 挿入されたリンクスタイルシートは、IE7+の既存のスタイルよりも優先されます
動的スタイルシートをカスケードする場合、IEにバグがあるようです。回避策があるかどうか誰かが知っていますか？このことを考慮：
挿入された「test.css」には。が含まれています#test{background:green}。
<link>タグの前に配置し<style>ますが、IE7 +は挿入されたスタイルシートでスタイルをオーバーライドし、背景として緑を適用します。
FF / Chromeはこれを正しい方法で実行し、スタイルタグが挿入されたリンクタグよりも優先されるようにして、背景が赤のままになるようにします。
css - TD のすべての div.class 子を非表示にしてから、最初の div.class 子を表示します
以下は、私の知る限り、理論的には機能するはずですが、そうではありません。
その結果、small.attachments 要素に small.attachment 兄弟がない場合はいつでも、first-child ルールが適用され、display:none ルールがオーバーライドされて、正常に表示されます。
ただし、TD に 2 つの small.attachments 要素が次々にある場合 (上記の例)、両方が非表示になり、first-child ルールは効果がありません。
どうしたの？
PS: Safari と Firefox でテストしました。
css - さまざまなレベルの CSS と相互の優先度
私はこのトピックに関するまともな記事を読んでいました: http://www.plus2net.com/html_tutorial/css-types.php 検索用語 css スタイル シートの優先順位について、Google によって最高ランクにランク付けされました。しかし、このサイトはあなたに誤解を与えており、不完全だと思います! 誰かが私の疑いを確認できますか?
1) ユーザー定義スタイルは 2 番目に低い優先度です。他のスタイルをオーバーライドするには、!important を使用して最高に移動する必要があります。2) <link> と @import および <link> 内の @import の相対的な優先度について言及していません。
より正確な順序付けは次のようになります (1 勝 2 など) :
- ユーザー定義 (ブラウザ設定 !重要 - [Google Chrome ではありません!])
- インライン スタイル シート (HTML ノードのスタイル属性)
- 内部スタイル シート (<head> 内の <style>)
- 外部スタイルシート (@import)
- 外部スタイル シート (<リンク>)
- 外部スタイル シート (<link> 内の @import)
- ユーザー定義 - (ブラウザ設定 - [Google Chrome ではありません!])
- ブラウザのデフォルト - (ブラウザに同梱)
Michael Bowers Pro CSS & HTML Design Patternsも、これに関する優れた情報源です。しかし、インラインについては言及されていません。
他に欠けているものはありますか？
PS: 私は !important が 2-8 から欠落していると推測していました。そのため、User defined が 2 回表示されます。1 回は重要で、2 回目は重要ではありません。したがって、ユーザー定義は本質的に2番目に低いです。!important は当然どのレベルでも適用できます。
css - スタイルシートの順序に基づくCSSの特異性/優先度？
CSS3 Selectorsの仕様を簡単に調べましたが、この問題を回避する方法が見つかりませんでした。さらに、CSS宣言を移動したときに、この結果が変わるとは思っていませんでしたが、変わります。どんな助けでも素晴らしいでしょう。
css - カスケード オプションを無効にするにはどうすればよいですか?
すべてのdivにcssオプションがあります
myDiv以外のcssオプションを継承しないidでdivを作成するにはどうすればよいですか#myDiv。
css - フッターのウィジェットスタイルシートで使用される！importantプロパティをオーバーライドする
ページのフッターに読み込まれるTwitterウィジェットがあります。問題は、それが至る所で！importantプロパティを使用することです。そして、私のスタイルシートはすべて頭にロードされているので、ウィジェットのスタイルシートは自動的に私のスタイルシートを上書きします。
これを強制するには、ドキュメントのフッターのウィジェットの下にいくつかの個別のスタイルを配置する必要がありますか？それとももっとセマンティックな方法がありますか？
css - CSS を正しくサブクラス化していますか?
私は自分のサイト用に一連のボタンを作成していますが、専門的な洞察が必要です。
CSS の肥大化を減らすために、ボタンをさまざまな色 (例: .button.blue ) にサブクラス化したいと考えています。
次のような問題は今後発生しますか? (.blue だけのクラスを作成しないと仮定して)代わりに .button.button-blue のようなものを使用する必要がありますか?
css - 奇妙なカスケードの問題に混乱
CSS で奇妙な問題が発生しています。@chriscoyier のコードを SMACSS アプローチを使用してリファクタリングし、モジュール化しました。
.ribbon.green を CSS の一番下に移動すると、適用されません。これは、ribbon:after & リボン:before と関係がありますか?
それをボタンに移動すると、jsFiddle では正常に機能するようですが、Firefox や Chrome では機能しないようです。 http://jsfiddle.net/SkinnyGeek1010/cDWKe/1/
なぜこれを行うのかについてのアイデアはありますか？とにかく.ribbon.greenを一番下に移動することはありますか? これにより、ミックスインで「スキン」を簡単に変更できます。
** ドロップボックス html を追加 **
http://dl.dropbox.com/u/1407764/www/stackoverflow/corner-ribbon/green_ribbon_example.html
css - デフォルト値を持たないCSSプロパティのオーバーライド
そのプロパティにデフォルト値がない場合、CSSでプロパティをオーバーライドすることは可能ですか？
たとえば、プライマリスタイルシートが特定の要素の境界線を定義するとします。
セカンダリスタイルシートから境界線を無効にしたい場合は、次のようにすることができます。
セカンダリスタイルシートがプライマリスタイルシートの後にロードされたとすると、border: noneルールが優先され、境界線が削除されます。
しかし、デフォルト値またはnull値を持たないプロパティをオーバーライドしようとした場合はどうなりますか？
次に、セカンダリスタイルシートでこれを実行したいとします。
そして、あなたはの値を望んでいませんでしたleft。のようなものはないので、プライマリスタイルシートで割り当てられleft: none;たプロパティをどのように「宣言解除」しますか？left